Skip to main content

Accordion "Left Navigation" (Quick Launch) for SharePoint 2013

For Expand/collapse "Left Navigation (Quick Launch) for sharepoint 2013
Copy the below code and paste in Master page


jQuery(document).ready(function () {

 /*set dynamic css logic*/

 if($('#sideNavBox .menu-item.selected').length){

  //propagates the selected class, up the three.

  $('li.static').removeClass('selected');

  $('#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).find('ul').length){

   $(this).addClass('father').click(function(){

    if($(this).children('ul').css('display') != 'none'){

     $(this).removeClass('selected').children('ul').slideUp();

    }

    else {

     /*collapse-siblings*/

     $(this).siblings().removeClass('selected').children('ul').slideUp();

     /*expand*/

     $(this).addClass('selected').children('ul').slideDown();

    }

    /*added: stop event propagation to link nodes*/

    $('a.static').click(function(event) {

        event.stopPropagation();

    });

    /*added*/

   });

  }

 });

});

Comments

thanks for the above post, which is working fine the collapsible left navigation

Popular posts from this blog

Modifying the second level navigation arrow image

Open your master page. Switch to Code View. Search for "TopNavigationMenu". This should take you to the global navigation (top nav) instance of AspMenu. Using Intellisense in the code view, or using the Properties pane, add the following property to the AspMenu tag: DynamicPopOutImageUrl="insert image URL/path here"So your code should look like: Runat="server" DataSourceID="topSiteMap" DynamicPopOutImageUrl="/images/myimage.gif" >