Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I improved the answer and created a blog post about it here.

I followed this post in order to add the jQuery accordion functionality to the Quick Launch in SharePoint.
While the code in the above link applies to SharePoint 2007, I somewhat managed to change it so that it should now work with SharePoint 2013.

Here's the code that I currently have:

///<reference path="jquery-1.2.6-vsdoc.js"/>
function initQuickLaunch() {
    // For each Quick Launch navigation link (sub menu): 
        // Find any navigation items under the sub menu that have been selected.
        var selectedNavItems = $(this).find("a.selected");

        // Find the corresponding heading of the current sub menu being processed
        var menuHeader = $(this).parents("a:eq(0)").prev("a").find("ul#zz16_RootAspMenu>li.static>a.static:eq(0)");         

        if ($(menuHeader).hasClass("selected") || selectedNavItems.length > 0) 
            // If the navigation header for this sub menu is selected or if there are any 
            // selected navigational items in this submenu, show the submenu.
            // alert('Show submenu');
            // otherwise, hide the submenu
            // alert('Hide submenu');

    // When a user clicks a navigation heading, the user should be taken directly
    // to the corresponding page of that subsite. The javascript event handler to 
    // hide/display the submenus should not be triggered.
    $("ul#zz16_RootAspMenu>li.static>a.static").click(function(e) {
        // alert('User clicked on navigation header');   

    // When the user hovers over the navigation heading, it would be nice
    // to have an indicator that they can click on the heading. Usually,
    // browsers use the hand icon to indicate clickable items.
        $(this).css("cursor", "hand");
    }, function(e){
        $(this).css("cursor", "default");

    //Finally, this adds a click event handler for the navigation heading 
    $("ul#zz16_RootAspMenu>li.static>a.static").click(function(e) { 
        var subMenu = $(this).parents("a:eq(0)").next("a").find("ul#zz16_RootAspMenu>li.static>ul.static>li.static>a.static:eq(0)");
        // alert(subMenu.length);
        if (subMenu.length > 0)
            //only if we have a submenu should we hide the other submenus and show the current one.


Currently the above code can hide all the navigation links under each heading in the Quick Launch upon load, but the problem I have is: when you click on a certain heading, it does not show the corresponding navigation links. It just follows the url behind that heading and goes to that subsite. And when it is on the subsite, it should normally show all the navigation links underneath that subsite as well, but this doesn't work either.

You may see some alerts in comment here and there, I just added those to see which part of the code gets executed when I test it out.

I would really appreciate it if someone would take a look at this, I'm sure I'm just looking over something small, I just can't figure out what.

Steps to reproduce:
1) Copy the above code and paste it in a new file named "accordion.js"
2) Add a reference to this file in your master page (see code below for my reference)

<script src="/Style Library/Intranet/scripts/accordion.js" type="text/javascript"></script>

3) Change the body tag on the master page (see code below)

<body onload="initQuickLaunch()">

4) Test it out on a site that uses that master page

Thanks for your time!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

You cannot use scripts created for a SharePoint 2007 masterpage in SharePoint 2013 - I guess there are way too many differences.

I found a solution for SharePoint 2013 (code is in english): http://joao-pinho.blogspot.de/2012/11/sharepoint-2013-accordion-quicklaunch.html?m=1

 /*set dynamic css logic*/
 if($('#sideNavBox .menu-item.selected').length){
  //propagates the selected class, up the three.
  $('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');

  //collapses top siblings of selected branch
  $('#sideNavBox .menu-item.selected').parents('li.static').last().siblings()
   .find('> ul').hide();
 else $('#sideNavBox .root.static > li.static > ul').hide();

 /*set accordion effect*/
 $('#sideNavBox .root.static > li.static').each(function(){
    if($(this).children('ul').css('display') != 'none'){
    else {


    return false; //**<= add this one**
share|improve this answer
This one does seem to work, but as soon as I click a heading it still follows the link behind it. It does show the sub menu for a very short moment tho. Any idea how to fix this? –  Magali Mar 12 '13 at 14:30
This is a sign that there is a return false; missing for the click event. I fixed it in the answer above. –  Max Melcher Mar 13 '13 at 15:55
Thanks! Works! :) –  Magali Oct 22 '13 at 13:13

There is a bug in the solution above (sub links do not work) that is fixed with this solution: http://borderingdotnet.blogspot.com/2013/04/accordion-left-navigation-for.html

share|improve this answer

Your Answer


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.