This post will walk you through all the steps you need to configure an animated sliding accordion using the standard out-of-the-box SharePoint navigation functionality. It is pretty simple to do, you just need one line of CSS, a reference to jQuery and a few lines of JavaScript. Each section of the accordion will expand and collapse when clicked on, and only one section can be open at a time. It will automatically open if you are on a page that is linked to from your left navigation, to help your users navigate your site.

If you want this to work across your entire site, I would recommend making a copy of the v4 master page and customizing that, or if you already have a custom master page, obviously use that. If you only want it on a few pages, you can just put all the code below into a text file and call it using a content editor web part. For the purposes of this post, that is exactly what I’m going to do.

There is one prerequisite to get this working. You will need to have the Publishing Infrastructure site collection feature activated. This lets you get at the options you will need when configuring the navigation items. You can’t have your top navigation elements (containers) have links, and you can’t do that with the standard quick launch editor.

So, to get started, here is the CSS you will need (I have included some more CSS at the bottom of this post to make the menu look more customized):

	.s4-ql ul.root ul {display:none;}

Basically, this just hides all the child navigation elements when the page loads. The jQuery will turn them back on as needed.

Next comes the JavaScript. We load jQuery then include our custom JavaScript.

<script type="text/javascript" src="/_layouts/RAPortal15/Scripts/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
	//Find the element in the left nav that has the selected class applied by SharePoint (current page) and expand the parent element
	$(function() {
		$('li.selected').parent().show();
	});
	
	//Accordian left nav
	var subLink = 0; //Account for the double-click that happens when you click an element (parent element also registers a click)
	$('li.static').click(
		function(){
			var theURL = $(this).find('.menu-item').attr('href');
				
			if($('ul', this).is(":visible"))
			{
				if(subLink != 1)
				{
					$('ul', this).hide("fast");
				}
			} else {
				if(theURL)
				{
					subLink = 1;
				} else {
					$("div.menu-vertical>ul.root>li.static>ul.static").hide("fast");
					$('ul', this).show("fast");
				}
			}
		} 		
    ); 
			
</script>

The accordion can only have one open section at a time and if a link is clicked, the accordion stays open. It will then open to the section that contains the link that was opened. Unfortunately, SharePoint has all the parent and child elements with the same class, so to keep the accordion opened when a link is clicked, I had to set the subLink variable because clicking a link item actually registers two events which would cause the menu to jump between page loads.

As promised, here is a bit more CSS to fancy up your quick-launch:

.s4-ql{border:1px solid #b2bfcb;margin:0px;width:200px;}
.s4-ql ul.root ul {display:none;background-color:#e0e9f0;margin-bottom:0px;}
.s4-ql ul.root ul li {display:block;padding:0px;border-bottom:1px solid #cccccc;}
.s4-ql ul.root ul li a {padding:7px;}
.s4-ql ul.root ul li a:hover {background-color:#b2bfcb;color:#3B4F65;}
.s4-ql ul.root {display:block; background-color:#346895;cursor:pointer;}
.s4-ql ul.root li {border-bottom:1px solid #4e7fa9; padding:0px;}
.s4-ql ul.root > li > .menu-item {color:#ffffff; padding:7px;}
.s4-ql a.selected {background:#c9d8e3;}

If you would like more information on C5 Insight or on this blog post, please fill out our Contact form.