Is it possible to turn the left side menu (I think it's the Quick Launch area) into a jQuery Accordion style menu in SharePoint 2010? The jQuery UI Accordion control uses DIV tags, so wasn't sure if the UL/LI tags could work with that or another plugin.
-
It is working, but i need other requirement is to show only one category at any point of time. With the above code the user can open all the categories. I want to hide one category if other category is open. Your help is appreciated. Thanks, Srikanth– user5814Nov 28, 2011 at 12:40
Add a comment
|
4 Answers
Here is a post that shows how to do this. Link The following jQuery can be placed in a content editor webpart or on the masterpage, which is how I implemented it.
function makeHeaderCollapsible() {
$("div.menu-vertical>ul.root>li.static>ul.static").css("display", "none");
$("div.menu-vertical>ul.root>li.static>span.static").toggle
(
function () {
$(">ul", $(this).parent()).show("fast");
},
function () {
$(">ul", $(this).parent()).hide("fast");
}
);
$("div.menu-vertical>ul.root>li.static>ul").css("display", "none");
};
I have a script that calls the above method once the page loads.
$(makeHeaderCollapsible);
I also needed an additional method to keep the menu section open if the current page is in that section. SharePoint provides help for finding this by marking the menu item with the 'selected' class. The following code was added at the end of the makeHeaderCollapsible method to open the selected section again.
$("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
-
Thank you, Rich! That was ridiculously easy :) I've got a JS file for the jQuery document.ready() function; after adding it in there, it works like a charm. I love the way items open up and then close. Thanks much.– Alex CAug 29, 2011 at 5:07
-
One question: What does this do?
$(">ul", $(this).parent()).show("fast");It's setting the animation on an element, but it's over my head :)– Alex CAug 29, 2011 at 5:23 -
1@Alex, that's what it is doing. Find the unordered list(UL), get the parent of this element element and show it. The speed is configurable with values like "fast" or "slow" or you can set a value in millisec. The jquery site has a better explanation. api.jquery.com/show Aug 29, 2011 at 11:27
-
An update: Found out that the
$("> elem", context)will be deprecated in a future release of jQuery (api.jquery.com/child-selector). Another way to reference the element without using the child selector is:$(this).parent().children('ul:first').show('fast');.– Alex COct 6, 2011 at 7:18 -
1makeHeaderCollapsible() is the function. $(makeHeaderCollapsible) calls the function after the document is ready in the DOM. similar to $document.ready(makeHeaderCollapsible). Nov 7, 2011 at 12:10
You certainly can; Rich's approach will work (and is probably the way I'd do it), you also have the option of porting the quick launch into an accordion control (there's a few plugins out there, or you can utilize jQuery UI). The nice thing about Rich's method is that it doesn't require re-rendering the quick launch--it's simply hiding or showing the element(s) under each header element.
Here is the script is working fine for me I found it from below link and did some modification. http://social.technet.microsoft.com/Forums/en-US/sharepoint2010customization/thread/02f1d451-aaca-4708-8171-fc6e4d24d7d6
$(document).ready(function() {
// do stuff when DOM is ready
$("#s4-leftpanel-content ul.root>li.static>a").css("margin-left","9px");
$(".s4-ql ul.root ul> li.static>a").css("margin-left","15px");
$("#s4-leftpanel-content ul.root>li.static").css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
makeLNCollapsible();
});
var flg = 0;
function makeLNCollapsible()
{
$("#s4-leftpanel-content ul.root>li.static>a").toggle(
function () {
$(">ul", $(this).parent()).show("fast");
$($(this).parent()).css("background","url('/_layouts/images/Menu1.gif') no-repeat 5px 7px");
},
function () {
$(">ul", $(this).parent()).hide("fast");
$($(this).parent()).css("background","url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
}
);
$("#s4-leftpanel-content li.static>ul.static").css("display","none");
$selectedEntry = $('li.static>ul.static .selected');
if($selectedEntry.length>0) {
$selectedEntry.parent().css("display", "block");
}
$selectedEntry = $('li.static.selected');
if($selectedEntry.length > 0) {
$selectedEntry.children('ul.static').css("display", "block");
}
}
-
I tried using this script but it didn't seem to work. Would you be able to offer it in its entirety?– user6716Feb 3, 2012 at 1:10
The script changed the top (horizontal) menu bar. Changing " $selectedEntry = $('li.static.selected');" to "$selectedEntry = $('#zz16_V4QuickLaunchMenu * li.static.selected');" fixes it.
<script type="text/javascript">
$(document).ready(function () {
// do stuff when DOM is ready
$("#s4-leftpanel-content ul.root>li.static>a").css("margin-left", "9px");
$(".s4-ql ul.root ul> li.static>a").css("margin-left", "15px");
$("#s4-leftpanel-content ul.root>li.static").css("background", "url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
makeLNCollapsible();
});
var flg = 0;
function makeLNCollapsible() {
$("#s4-leftpanel-content ul.root>li.static>a").toggle(function () {
$(">ul", $(this).parent()).show("fast");
$($(this).parent()).css("background", "url('/_layouts/images/Menu1.gif') no-repeat 5px 7px");
}, function () {
$(">ul", $(this).parent()).hide("fast");
$($(this).parent()).css("background", "url('/_layouts/images/Menu_Close.gif') no-repeat 5px 7px");
});
$("#s4-leftpanel-content li.static>ul.static").css("display", "none");
$selectedEntry = $('li.static>ul.static .selected');
if ($selectedEntry.length > 0) {
$selectedEntry.parent().css("display", "block");
}
$selectedEntry = $('#zz16_V4QuickLaunchMenu * li.static.selected');
if ($selectedEntry.length > 0) {
$selectedEntry.children('ul.static').css("display", "block");
}
}
</script>
