Tell me more ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 12 down vote favorite
3

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.

share|improve this question
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 – user5814 Nov 28 '11 at 12:40

4 Answers

up vote 14 down vote accepted

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");
share|improve this answer
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 C Aug 29 '11 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 C Aug 29 '11 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 – Rich Ross Aug 29 '11 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 C Oct 6 '11 at 7:18
1  
makeHeaderCollapsible() is the function. $(makeHeaderCollapsible) calls the function after the document is ready in the DOM. similar to $document.ready(makeHeaderCollapsible). – Rich Ross Nov 7 '11 at 12:10
show 2 more comments
up vote 5 down vote

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.

share|improve this answer
up vote 2 down vote

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");
                }

        }
share|improve this answer
I tried using this script but it didn't seem to work. Would you be able to offer it in its entirety? – user6716 Feb 3 '12 at 1:10
up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.