Simple Accordion Quick Launch

A frequent request is to have the Quick Launch menu in SharePoint expand & collapse like the tree view. This “accordion” style menu can be achieved through various methods using JavaScript and/or jQuery. One of the better scripts I’ve found for this comes from Sanna Marilka over at Bordering.NET. The script did almost everything I wanted right off the bat, but it needed a few slight alterations. The first issue was that if you clicked on a link inside the already-expanded category, the category closed instead of following the link. Brendan Horner posted a fix for that in the comments on the page, so the version below has that fix included.

The second issue is that with the fixed version of the script, the father span (ie – category link) could no longer be independently styled. So to fix that, I ended up adding the class to the actual anchor tag instead of the span under it. Now you can apply styling to the parent categories. In my example below, I’m simply adding a bullet icon to the background of the categories that have children items.

Update: I found a third issue – if a category didn’t have a link on it (just a blank header), the expand/collapse functionality didn’t work. To fix this, I added a couple of lines that convert the span tag into an anchor tag. So with this updated version, even blank menu headings should still expand/collapse just like ones that have a link.

To use this, I put the script in a file called “accordion.js” and placed it in my style library, then called it from the master page. You could also put it in script tags directly in the master page or on a specific page via Content/Script Editor web part. The CSS can either be in the same file or in your custom stylesheet.

SCRIPT:


$(function(){
/*set dynamic css logic*/
if($('#sideNavBox .menu-item.selected').length){
//propagates the selected class, up the tree.
$('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).children('a').addClass('father');
var myContent = $(this).children('span.static').contents();
$(this).children('span.static').replaceWith(myContent);
$(this).children('span.ms-navedit-flyoutArrow').wrap('<a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode father" tabindex="0">');</a>
$(this).children('a').click(function(){
if($(this).parent().children('ul').css('display') != 'none'){
$(this).parent().removeClass('selected').children('ul').slideUp();
}
else {
/*collapse-siblings*/
$(this).parent().siblings().removeClass('selected').children('ul').slideUp();

/*expand*/
$(this).parent().addClass('selected').children('ul').slideDown();
var myLink = $(this).attr('href');
windows.location.href = myLink;
}

/*added: stop event propagation to link nodes*/
$('a.static').click(function(event) {
event.stopPropagation();
});

/*added*/
return false;
});
}
});
});

CSS:


.ms-core-listMenu-verticalBox > .ms-core-listMenu-root > li > a.father {
background-image:url('/Style Library/MyTheme/icons/ql-bullet.png');
background-repeat:no-repeat;
}

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s