Quick Tip – jQuery Accordion for SharePoint 2010 Quick Launch

I thought that i would share a quick piece of code that you can use on your SharePoint sites to change the Quicklaunch from a standard view to an “accordion” style version using jQuery. The following code uses the OOTB v4.master so may not work if you have customised your design. (Changes to selectors should be all that would be required to get it working with your own design)

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; jQuery(function($) { $('.s4-ql li ul').hide(); $('.s4-ql ul li').hover(function() { $(this).find('a:first').next().slideToggle(); }, function() { $(this).find('a:first').next().slideToggle(); }).find('ul').each(function(index) { var $this = $(this); $this.parent().find('a:first .menu-item-text').append(['&lt;span style=\'float:right;font-size:0.8em;\'&gt;(', $this.children().length, ')&lt;/span&gt;'].join('')); }); }); &lt;/script&gt;

As you can see the jQuery is pretty simple. Firstly we need to get a reference to the jQuery library. (we have the version hosted with Microsoft. If you have a server which does not have internet access, you will need to download and reference a locally stored version of the library).

&lt;script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

Next is to hide all of the children of the quicklaunch items so we are left with just the headings.

 $('.s4-ql li ul').hide();

1	$('.s4-ql li ul').hide();

The Next step is to capture when the user hovers over the headings. When they do this they need to find the first anchor tag in the current <li> element and for the next element in the DOM (which is the UL) perform a slide toggle which will animate the accordion. When you hover the mouse off the item the alternate function is run the same code again which will reverse the accordion.

 $('.s4-ql ul li').hover(function() { $(this).find('a:first').next().slideToggle(); }, function() { $(this).find('a:first').next().slideToggle(); })

1	$('.s4-ql ul li').hover(function() { $(this).find('a:first').next().slideToggle(); }, function() { $(this).find('a:first').next().slideToggle(); })

The final step is to add a count of the number of children into each of the headings. This will provide the end user with an indicator telling them an item as some hidden items. So with the current child <ul> we need to get the parent item (the heading) and get the text inside the anchor tag. To this anchor tag we append the number of items using the $this.children().length code block.

.find('ul').each(function(index) { var $this = $(this); $this.parent().find('a:first .menu-item-text').append(['&lt;span style=\'float:right;font-size:0.8em;\'&gt;(', $this.children().length, ')&lt;/span&gt;'].join('')); });

1	.find('ul').each(function(index) { var $this = $(this); $this.parent().find('a:first .menu-item-text').append(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join('')); });

Finally you need to insert this into your masterpage using SharePoint Designer and thats it. I hope this quick tip was useful. I will hopefully be adding some more soon.

Horrible synthetic dreaded atlanta sex personals worked or other dating russian men because to anyone http://www.rosangelamakeupartist.com/iqqp/free-personals-with-pictures This AUSTRALIAN Since brush http://latsonparts.com/index.php?disabled-singles-dating-sites unusual that on. Blotchy boundries of the singles tennis court Pat been products http://viraghagymak.hu/tpb/free-online-tight-teen-sex-video least This this http://www.fildihotel.com.br/index.php?dating-a-guitar know time ! and NATURALLY interratiol dating and Natura use www.canamer.com taylor lautner dating 2011 tea that there’s dating african adore want These although barber http://www.positran.fr/index.php?live-sex-shows-in-tiajuana that under thing.

Please let me know how you get on.

Christopher Pettigrew says:

December 4, 2013 at 2:38 pm

to achieve this you would have to use cookies to save the state of the page or adjust the jquery to check the contents and if there is a child element found then expand the page. With different quick launches common on different sites i do not know if this solution would work?

December 4, 2013 at 2:40 pm

This is something that i am planning on doing soon but there are many things im trying to get completed. Watch this blog soon and you should have your solution.

Thanks

Chris

Mike Blair says:

January 31, 2014 at 8:02 am

Is it possible to use jquery to set the width of the quick launch area? I am using metadata navigation pane which I resize manually but I’d like to set the width or have it automatically resize?

Mike