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)
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
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(['<span style=\'float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));
});
});
</script>
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).
<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();
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();
})
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(['<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. Please let me know how you get on.
Thanks. Looks good. Any chance of improving it with overintent.
I am unsure what you mean by overintent? Can you be alittle more specific please
*UPDATE* – “HoverIntent” thanks..will look into this over lunchtime today and see if i can get it work
I found a funny behaviour when the pointer pass through the link header many times and fast. there is a kind of action queue. I modifided the script, and do a toogle with a click. Hope this would be useful.
———————————————————————–
jQuery(function($) {
$(‘.s4-ql li ul’).hide();
$(“div.menu-vertical>ul.root>li.static>a”).toggle(
function () {
$(“>ul”, $(this).parent()).show(“fast”);
},
function () {
$(“>ul”, $(this).parent()).hide(“fast”);
});
$(‘.s4-ql ul li’).find(‘ul’).each(function(index) {
var $this = $(this);
$this.parent().find(‘a:first .menu-item-text’).append(['(', $this.children().length, ')'].join(”));
});
})
———————————————————————–
Thanks for this.. I will be adding a hoverIntent version soon which should fix it
I added a footer and a logo but this is hidden on all the users even other site owners; except my user account, anyone with a soltion.
Can you provide me with some more details as i am unsure what you mean from this?
Thanks
Thanks for the script. Worked pretty well
Very nice little script, here. Cheers!
Any idea how to implement the on-click referenced by Rodrigo? I tried using that code and it breaks the code you posted above. Any chance you could implement that into your code snippet?
I love the code but it has a caching issue where if someone moves their mouse over the links quickly it goes a bit crazy.
thanks!!
I will be providing an update which includes hoverIntent to ensure it does not go crazy
Thanks for the comments
Hi, I copied your script and added to my Default.master via SharePoint Designer 2010 and it doesn’t work. Does it matter where I place this script? It is suppose to work with SharePooint Foundation 2010, right?
I will do some testing on a foundation install and see if I can resolve. Thanks
got it working on the left menu (quickstart) – how can I make it work with a list and it’s items?
How do you mean working on lists and list items? What are you trying to do?
How can I implement this to include the count of items for say 2/3rd level of the control. Example: In your example above if I wanted to show number of items within the “Shared Document: area and if there was further folders under that to show the count of items in those?
Do you mean give the count of the number of items in the library? If so this will not be possible using jQuery. Could u give me a screenshot example of your left hand menu and I will look into it for you. Thanks.
Tanx ,its working on the left menu (quickstart) – how can I make it work with some hyperlinks.
For example:-
Accordion1
(content1)
Accordion2
(content2)
Accordion3
(content3)
Accordion4
(content4)
In my case, accordion-1,2,3,4 are hyperlinks
Hi Chris,
This working great, but as mentioned in the above comments it is behaving funny when hovered couple of times, and tried the code from “Rodrigo Brandariz” but it is not working for me.
Can you please update this with click, I mean toggle when clicked on the headers
Thanks, in advance
I will release a new version of this code shortly which will use click buttons to expand / collapse functionality. Thanks. Chris