Sharepoint - jQuery accordion for the Quick Launch menu?

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

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

        }