Expand Collapse feature for Left Managed Current Navigation in Share point 2013

Hi all,

Sometime back I got a requirement from client that the left side navigation in Sharepoint can have expand collapse feature. There are 2 scenarios we can do. Implementation using jquery. Thanks to Christopher Pettigrew for his inspiration.

Don’t forget to refer jquery file.

First Scenario:

First functionality will have navigation menu with list items and when ever a list item clicked the items will display like accordion and next list item clicked it will display the inner items but first list items will be in expanded form only.

$(function () {

$(“.ms-core-sideNavBox-removeLeftMargin li ul”).hide();

var Collapse = “/images/Minus_Icon.png”;

var Expand = “/images/Plus_Icon.png”;

//Find each top level UI and add reletive buttons & children numbers

$(‘.ms-core-sideNavBox-removeLeftMargin ul li’).find(‘ul’).each(function (index) {

var $this = $(this);

$this.parent().find(‘span:first .menu-item-text’).parent().parent().parent().prepend([‘<a class=\’min\’ style=\’float:right; margin-top:3px;\’><img src=\’/sites/XYZ/SiteAssets/images/Plus_Icon.png\’/></a>’].join(”));

});

$(“.min”).click(function () {

var img = $(this).children();

//Traverse the DOM to find the child UL node

var subList = $(this).siblings(‘ul’);

//Check the visibility of the item and set the image

var Visibility = subList.is(“:visible”) ? img.attr(‘src’, Expand) : img.attr(‘src’, Collapse);;

//Toggle the UL

subList.slideToggle();

});

});

2. Second scenario is:

If one list item i selected it will expand and the other list nodes must collapse.

$(function () {

$(“.ms-core-sideNavBox-removeLeftMargin li ul”).hide();
var Collapse = “/sites/xyz/SiteAssets/images/Minus_Icon_new.png”;
var Expand = “/sites/xyz/SiteAssets/images/Plus_Icon.png”;

//Find each top level UI and add reletive buttons & children numbers
$(‘.ms-core-sideNavBox-removeLeftMargin ul li’).find(‘ul’).each(function (index) {
var $this = $(this);
$this.parent().find(‘span:first .menu-item-text’).parent().parent().parent().prepend([‘<a class=\’min\’ style=\’float:left; margin-top:3px;\’><img src=\’/sites/xyz/SiteAssets/images/Plus_Icon.png\’/></a>’].join(”));
});

$(“.min”).click(function () {
var img = $(this).children();
//Traverse the DOM to find the child UL node
var subList = $(this).siblings(‘ul’);
//Check the visibility of the item and set the image
var Visibility = subList.is(“:visible”) ? img.attr(‘src’, Expand) : img.attr(‘src’, Collapse);;
//Toggle the UL
//subList.slideToggle();

$(“#zz15_RootAspMenu > li.static.father”).each(function() {
//you can find the menu id with chrome developer tool bar Inspect element on right //click and also you can see css will be different for list which is selected
// keep an alert(“hai”); to check whether your code entering below are not

var img = $(‘#zz15_RootAspMenu > li.static.father.selected > a > img’);
img.attr(‘src’, Expand);

});

});

/*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*/
return false;
});
}
});
});