How to extend SharePoint 2013 Out-of the Box left navigation to have Expand and Collapse functionality along with the capability to maintain state?
Below code can be utilized to achieve the above functionality. JQuery reference files need to be referred in the code. Along with that, JQuery cookie plugin needs to be referred in the code which can be downloaded from the following location-
https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js
This code can be implemented in the master page, so that the same functionality will be reflected across all pages in the site. Whenever a link from left navigation is clicked, it will be stored in a cookie variable. On navigating to a new page, first the application will check if any value exists in the cookie variable. If so, then it will first check if any of the left navigation links matches the cookie variable and, accordingly expand and collapse the navigation menus. Once any menu item is collapsed, the system will remove that menu item link from the cookie variable.
<script type="text/javascript">
$(function(){
var menuClickedOld = readCookie("Menu_Clicked");
var cookieArray=null;
if(menuClickedOld!=null)
{
cookieArray=menuClickedOld.split('#');
}
if($('#sideNavBox .menu-item.selected').length){
$('li.static').removeClass('selected');
$('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');
$('#sideNavBox .root.static > li.static').each(function () {
if($('span > span > span ', this).html() ==undefined)
{
if(jQuery.inArray($('a > span > span ', this).html(), cookieArray)==-1)
{
if($(this).find('ul').length>0)
{
$(this).find('ul').hide();
}
}
}
else
{
if(jQuery.inArray($('span > span > span ', this).html(), cookieArray)==-1)
{
if($(this).find('ul').length>0)
{
$(this).find('ul').hide();
}
}
}
});
}
else $('#sideNavBox .root.static > li.static > ul').hide();
$('#sideNavBox .root.static > li.static').each(function(){
if($(this).find('ul').length){
$(this).addClass('father');
$(this).css("position", "relative");
$(this).prepend("<span class='leftHeader'></span>").click(function(event){
if(event.target.className=='leftHeader')
{
if($(this).children('ul').css('display') != 'none'){
$(this).removeClass('selected').children('ul').slideUp();
$(this).find('span[class*="leftHeader"]').css('background-image', 'url("/_layouts/15/images/expand.gif")');
if($('span > span > span ', this).html()==undefined)
{
var menuClicked = RemoveCookie("Menu_Clicked", $('a > span > span ', this).html(),1);
}
else
{
var menuClicked = RemoveCookie("Menu_Clicked", $('span > span > span ', this).html(),1);
}
}
else {
$(this).find('span[class*="leftHeader"]').css('background-image', 'url("/_layouts/15/images/expand.gif")');
if($('span > span > span ', this).html()==undefined)
{
var menuClicked = createCookie("Menu_Clicked", $('a > span > span ', this).html(), 1);
}
else
{
var menuClicked = createCookie("Menu_Clicked", $('span > span > span ', this).html(), 1);
}
$(this).addClass('selected').children('ul').slideDown();
$(this).find('span[class*="leftHeader"]').css('background-image', 'url("/_layouts/15/images/expand.gif")');
}
}
});
}
});
});
function createCookie(name, value, days) {
var nameEQ = name + "=";
var cookievalue;
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) cookievalue=c.substring(nameEQ.length, c.length);
}
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
if(cookievalue!=null)
{
var cookieArray=cookievalue.split('#');
if(jQuery.inArray(value, cookieArray)!=-1)
{
value=cookievalue+'#';
}
else
{
value=value+'#'+cookievalue;
}
}
else
{
value=value+'#';
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function RemoveCookie(name,value,days)
{
var nameEQ = name + "=";
var cookievalue;
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) cookievalue=c.substring(nameEQ.length, c.length);
}
if(cookievalue!=null)
{
var cookieArray=cookievalue.split('#');
if(jQuery.inArray(value, cookieArray)!=-1)
{
value=value+'#';
cookievalue=cookievalue.replace(value,'');
}
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + cookievalue + expires + "; path=/";
}
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
//]]></script>
<style type="text/css">
.leftHeader{
position:absolute;
top:5px;
height:20px;
width:20px;
left:5px;
background:url("/_layouts/15/images/expand.gif") no-repeat!important;
}