Accordion Style Left Navigation using JQuery and CSS in SharePoint 2010

Accordian style leftnavigation menu sharepoint2010.png
InfoPath alternatives for form designing SharePoint

All the Quick links menu provided by sharepoint 2010 out of Box has a fix format and altering its CSS alters its branding. Implementing collapsible headings in the quick launch for SharePoint 2010 (jquery UI accordion effect) would solve this issue.. All the solutions that I’ve seen are for sites and sub sites. In the site navigation settings, I have entered a heading with links to site pages under it.

Read some SharePoint tutorials on:

My current navigation works fine like if category is open it will remain open until click on the category; I implement this accordion on SharePoint current navigation.



However we can achieve collapsing and expanding functionality using:
a) jQuery
b) CSS

jQuery:
If you want the accordion-style menu for all pages, you should work it into the v4.master.
You need to add the following code into the v4.master.
To edit, open the v4.master in SharePoint Designer 2010, share this piece of code to obtain accordion style quick launch in SharePoint 2010.

<script type=”text/javascript” src=”http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js”>
<script type=”text/javascript”>
$(function($) {
//Hide all
$(‘.s4-ql li ul’).hide();
//Set the Images up
var Collapse = “/_layouts/images/collapse.gif”;
var Expand = “/_layouts/images/expand.gif”;
//Find each top level UI and add reletive buttons & children numbers
$(‘.s4-ql ul li’).find(‘ul’).each(function(index) {
var $this = $(this);
$this.parent().find(‘a:first .menu-item-text’).parent().parent().parent().prepend([‘<a class=\’min\’ style=\’float:right; margin-left:5px;margin-top:6px;margin-right:5px;\’><img src=\’/_layouts/images/expand.gif\’/></a>’].join(”));
});
//Setup Click Hanlder
$(‘.min’).click(function() {
//Get Reference to img
var img = $(this).children();
//Traverse the DOM to find the child UL node
var subList = $(this).siblings(‘ul’);
//Check the visibility of the item and set the image
var Visibility = subList.is(“:visible”)? img.attr(‘src’,Expand) : img.attr(‘src’,Collapse);;
//Toggle the UL
subList.slideToggle();
});
});
</script>



Accordian style leftnavigation menu sharepoint2010.png
Accordian style leftnavigation menu sharepoint2010.png

CSS:
It is possible to do it with pure CSS. When it comes to SharePoint there is only one caveat – you can create a CSS with only accordion menu as long as the accordion effect fires on hover and not when the navigation header is clicked.
Add the following CSS into the v4.master:

To edit, open the v4.master in SharePoint Designer 2010

<style>
.s4-ql li.static {
height: 2em;
overflow: hidden;
}
.s4-ql li.static:hover {
height: auto;
}
.s4-ql li > span.menu-item {
cursor: pointer;
}
/* Format the headers */
.s4-ql li > span.menu-item {
cursor: pointer;
background: #0171C6;
color: white;
border: solid #fff;
border-width: 1px 0;
}
/* Format the accordion list items */
.s4-ql a.menu-item {
color: #000;
background: #C9D4FF;
border: 1px solid #97C8F7;
border-bottom: none;
}
/* Format the header hover, list item hover and currently selected item */
.s4-ql li > span.menu-item:hover, /*Header */
.s4-ql a.selected, /* Selected */
.s4-ql a.menu-item:hover /* List item */ {
color: #FFF;
background: #073D7D;
}
.s4-ql ul.root > li.static {
max-height: 2em;
overflow: hidden;
transition: max-height 1s linear;
}
.s4-ql ul.root > li.static:hover {
max-height: 500px;
}
</style>

Accordion Style Left Navigation using JQuery and CSS in SharePoint 2016
Accordion Style Left Navigation using JQuery and CSS in SharePoint 2013

Summary:
These are the two ways to implement accordion in SharePoint 2010 (Current Left Navigation).

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply