Thursday, February 11, 2016

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

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.



Got something to say? Join the discussion »
    Posted by Dooalot on 10/9/2015
    Need to add

    right before the
    F12 tool in your browser to confirm
    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


About C5 Insight

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

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

Upcoming Events

The Evolution of the Intranet: Creating a Culture of Collaboration

02/18/16 @ 3:00 PM ET This webcast will be broadcast LIVE from Transitioning Your Intranet to a Digital Workplace - See mo......

Deminar: Microsoft Social Engagement for Marketing, Sales, Service and Research

02/24/16 @ 2:00 PM ET In this deminar (that's demo + seminar) session, we will take a look at the Microsoft Social Engagem......

The 7 Deadly Sins of SharePoint: Planning Success and Avoiding Failure

03/10/16 @ 3:00 PM ET 60% of SharePoint projects are stalled, struggling, or failing, according to research conducted by t......

Top Downloads

SharePoint 2013 Feedback Solution - collect feedback from users into a custom feedback list that captures their feedback and exactly where they were in SharePoint when they provided it.

Why CRM Fails - research into CRM failure, best practices, and how to recover from a failing project.

The 60 Second Collaboration Readiness Self-Evaluation - is your team really ready to collaborate?  If they're not, software isn't going to help.  Take the quick self-evaluation in each department to understand how well your culture collaborates.

Identify Your Support Gaps - collaboration and CRM projects often fall short when it comes to supporting users, because support for these projects is different from other projects.  



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

The opinions 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