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;});
}
});
});
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" />
That’s all.
<SharePoint:Scriptlink runat="server" Name="~sitecollection/_catalogs/masterpage/scripts/Collapsible.js" Language="javascript" />