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.

4 comments:

Unknown said...

Hi
Its not working for me .
I have done all the steps.

Regards,
Shrikant

Unknown said...

Hi,
Its not working for me.
i have done all steps.

regards,
Shrikant

Dinusha Kumarasiri said...

Hi Shrikant

Did you encounter any error. check the developer dashboard for exceptions and let me know.

sp13learner said...

Excellent. Thanks Dinusha.

Two questions:
1.minus sign (when collapsed) not working on IE8 brwoser mode, any idea?

2.I wanted to show Arrow style menu images rather plus, minus signs ...any help?