Sunday, November 23, 2014

Create an Accordion Navigation for SharePoint 2010 using jQuery

Posted in [SharePoint], [Technical] By Kyle Wright @ 5/2/2013

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:

image

.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.

 

Comments

Got something to say? Join the discussion »
    Posted by chris on 10/1/2013
    Hi. Thank you for an excellent article. I enjoyed reading it.

    I have set this up as described but am having some issues. My CSS file is properly hiding the subitems, but I must have something wrong with the jquery script. I have it pasted in the bottom of my master page, but clicks on my headers are not displaying the next level of links. I have publishing on.

    Can you further clarify what you mean by " You can’t have your top navigation elements (containers) have links, and you can’t do that with the standard quick launch editor."?

    I took this to mean that within the navigation settings, the URL field should be blank. However, SharePoint will not allow a blank value for default headers (Libraries, Lists, etc.).

    Any suggestions?

    Thanks, Chris

leave a reply

 [Quick Submit with Ctrl+Enter]

Remember my details
Notify me of followup comments via e-mail

C5_Insight

About C5 Insight

We are a Microsoft Gold Certified partner focusing on SharePoint, Microsoft Dynamics CRM and Salesforce.com.  Learn more about us by visiting our website.

Search

We Wrote the Bible on Microsoft SharePoint and Dynamics CRMBook-Microsoft Dynamics CRM 2011 and SharePoint 2010 Bible

Tags

Maximize

Recent Comments

Maximize

Blog Roll

Maximize

Disclaimer

The information herein may be used solely at your own risk.  No warranty is made by the author or by C5 Insight, Inc.

The opinons expressed herein are those of the individual authors and do not necessarily represent C5 Insight, Inc in any way.

Copyright 2011-2013 by C5 Insight