Friday, June 7, 2013

Accordion style (Collapsible menu) for SharePoint quick launch

Recently we wanted to create a wiki site, But its quick launch had a large number of links. So we decided to categorize those links and make it collapsible to see child items. Our goal was to create something like below

image
We need to follow the steps given below
1] Insert following in a file and name it as Collapsible.js. This post was very helpful to me
$(function(){
if($('#sideNavBox .menu-item.selected1').length){
  $('li.static').removeClass('selected1');
  $('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');
  $('#sideNavBox .menu-item.selected1').parents('li.static').last().siblings()
   .find('> ul').hide();
 }
else
{
$('#sideNavBox .root.static > li.static > ul').hide();
$('#sideNavBox .root.static > li.static > ul').parent().children('a').children('span').children('span').each(function(){$(this).prepend("<span class='plusnode'>+ <span>")})
$('#sideNavBox .root.static > li.static > ul').parent().children('span').children('span').children('span').each(function(){$(this).prepend("<span class='plusnode'>+ <span>")})


 $('#sideNavBox .root.static > li.static').each(function(){
if($(this).find('ul').length){
   $(this).addClass('father').click(function(){
    $('.selected1 > span > span > span > span').text("+ ")
    $('.selected1 > a > span > span > span').text("+ ")
if($(this).children('ul').css('display') != 'none'){
     $(this).removeClass('selected1').children('ul').slideUp();
    }
else {
     $(this).siblings().removeClass('selected1').children('ul').slideUp();
     $(this).addClass('selected1').children('ul').slideDown();
     $('.selected1 > span > span > span > span').text("- ")
     $('.selected1 > a > span > span > span').text("- ")
    }
    $('a.static').click(function(event) {
      event.stopPropagation();
    });


    return false;
   });
  }
 });
});
2] Import the above js file and latest version of jquery in to _catelogs/masterpage using SharePoint designer. I created a separate folder called Scripts
image

3] Include the script and jquery file in the relevant masterpage
<SharePoint:Scriptlink runat="server" Name="~sitecollection/_catalogs/masterpage/scripts/jquery-1.9.1.min.js" Language="javascript" />

<SharePoint:Scriptlink runat="server" Name="~sitecollection/_catalogs/masterpage/scripts/Collapsible.js" Language="javascript" />
That’s all.