Quick Tip – jQuery Accordion for SharePoint 2010 Quick Launch

accordion_header

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)

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

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

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.

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.

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.

I am the SharePoint Development Lead at ICS Solutions Ltd. As well as broad knowledge in SharePoint 2007, 2010 & 2013 my specialities lie with SharePoint Branding, WebPart Development and JQuery integration.

58 Comments on "Quick Tip – jQuery Accordion for SharePoint 2010 Quick Launch"

  1. jim says:

    Thanks. Looks good. Any chance of improving it with overintent.

  2. 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 :)

  3. Rodrigo Brandariz says:

    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(”));
    });

    })

    ———————————————————————–

  4. Thanks for this.. I will be adding a hoverIntent version soon which should fix it :)

  5. Joel Rotich says:

    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.

  6. Can you provide me with some more details as i am unsure what you mean from this?

    Thanks

  7. Raghu says:

    Thanks for the script. Worked pretty well

  8. Chris says:

    Very nice little script, here. Cheers!

  9. Semajarab says:

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

  10. I will be providing an update which includes hoverIntent to ensure it does not go crazy :)
    Thanks for the comments :)

  11. Shelia Burton says:

    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?

  12. I will do some testing on a foundation install and see if I can resolve. Thanks

  13. James says:

    got it working on the left menu (quickstart) – how can I make it work with a list and it’s items?

  14. How do you mean working on lists and list items? What are you trying to do?

  15. Madison says:

    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?

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

  17. Syed Muzamil says:

    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

  18. bmanda says:

    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

  19. I will release a new version of this code shortly which will use click buttons to expand / collapse functionality. Thanks. Chris

  20. Imran says:

    Hi Christopher,

    I am using Jquery latest version but it is not working . I have added the script reference which is given below –

    1.

    2.

    Even if I am adding simple Jquery in the page it is not firing. Same code works in ASP.net application . Below is the code for your refrence –

    $(document).ready(function () {

    // $(‘#lblMessage’).html(strMessage);
    $(‘#lblMessage’).click(function myfunction() {
    $(‘#lblMessage’).html(‘Welcome!!’);
    });

    });

    Any help will be appreciated…
    Imran

  21. I think you are missing script references from 1.) ?? Are you getting any errors when you press F12 in IE and view the script log?

  22. kath says:

    Good script Chris !!

  23. barbara de luca says:

    It’s great!

  24. Hi Christopher

    Great script, how can I change it to show the menu based on the audience settings i.e. some links should only be available to a certain audience. The script does not seem to take that into consideration

  25. Alex says:

    GREAT!!! This is really the best script of all I’ve seen in the web the last hours !!!!!
    THANK YOU DUDE!

  26. Johan says:

    Thanks a stack, works like a charm!

  27. prasad says:

    Hi,
    thanks in advance
    I am stuck with a problem.When i select a link and navigate to that page and the side menu got refreshed.Instead of that i need to to highlight the current selection and show the menu in an expanded mode
    Prasad

  28. i will have a look to see if i can modify the script to take this into account :)

  29. Ronnie van Doorn says:

    Thanks!

    It is exactly what I was looking for!

  30. Danilo says:

    Thanks!

  31. Chris says:

    Were you ever able to get the version with hoverintent working? This is great aside from the action queuing. Even the toggle version would be good.

    Thanks for providing your code to the public!

  32. Chris says:

    I saw that you updated the code in a later post, but there was still no version utilizing hoverintent. Does it just not work? The version with the +- icons unfortunately doesn’t suit my purposes. I’m new to coding, so I’m trying to learn how to do this on my own, but apparently am no where near where I need to be to get this done. Appreciate your providing this code! At least it gives me something to go on to try to get started!

  33. Hi. I was able to get this working. I will get around to posting this soon.. thanks.

  34. Chris J says:

    I’m a newbie to coding, but this was far easier than I ever expected! I was able to modify your script with hoverIntent and achieve almost exactly the results I need! I downloaded the jQuery library and the hoverIntent jQuery plug-in to a site asset library on my SP site and linked my script to those. I don’t personally know of a CDN that provides hoverIntent.

    My only complaint with the script now is that it would probably work better if the lists opened in a flyout to the right instead of expanding down. That’ll be my next project! Look out Superfish, here I come! Thanks, Chris P!

    Sharing my modification for anyone else that needs it! Be sure to include your links to the jQuery library and the hoverIntent plug-in!

    var config = {
    over:function() {
    $(this).find(‘a:first’).next().slideToggle();
    },
    timeout:1000,
    out:function() {
    $(this).find(‘a:first’).next().slideToggle();
    }
    };
    jQuery(function($) {
    $(‘.s4-ql li ul’).hide();
    $(‘.s4-ql ul li’).hoverIntent(config);
    });

  35. Thanks for this modification. This is almost identical to the version that is included with the Metro Masterpage for Sandbox Solutions which is on my Codeplex. I am in the middle of re-writing all the plugins in a jQuery plugin architecture to make them far easier to use and implement.

    Thanks

  36. Alex says:

    Great script, thanks!

    But after user expands some heading and clicks some item in it, the page is reloaded and all headings become collapsed. Is there any possibility to leave the active heading expanded after user has clicked on item in this heading?

  37. Hi There,

    I am currently in the process of producing a cookie compatible version of this script in a new and cleaner plugin architecture. This will give you more flexibility and hopefully the functionality you require.

    Thanks

    Chris

  38. Arjun says:

    Hai,
    I would like to add below in code sharepoint 2010. Please guide me.

    $(function() {
    $( “#accordion” ).accordion();
    });

    Heading 1

    This is content. This is content.

    I have added below Jquery files in ………. \14\TEMPLATE\LAYOUTS\customjscript)
    jquery-1.9.1.min
    jquery-ui

    Eagerly waiting for you reply.
    Thanks
    Arjun

  39. Arjun says:

    Hai,
    I would like to add Jquery Accordion code for Sharepoint 2010. I have added jquery-1.9.1.js & jquery-ui.js file in _layouts\JScript folder. Now I want to add below code sharepoint designer. Please help where I can add this.

    $(function() {
    $( “#accordion” ).accordion();
    });

    Heading 1

    jQuery UI 1.10 includes dozens of bug fixes and improved accessibility. In addition, the dialog and progressbar widgets have undergone ‘

    Thank you,
    Arjun

  40. What have you tried so far? Have you used SharePoint Designer 2010 yet? Have you tried the content editor webpart??

  41. You can do this by editing the masterpage (v4.master) and pasting this in the relevant position in the code.

  42. venkat says:

    can anybody please tell where i supposed to insert this code?

    thanks

  43. anna says:

    Hi,
    Great work, thank you!!
    Did you ever get a chance to post code with + – to expand collapse?

  44. Nandhini says:

    Hi, I want to Remove Link in Quick Launch Bar Heading. The Heading is supposed to be as Label, Any code for this to Implement. Pls Help, Thanks in Advance.

  45. Panakj says:

    my mega menu control (top bar navigation) css are not working in IE8 but in chomre ths is great..please let me know what would be the cause

  46. Which version of SharePoint is this? 2010 or 2013?

  47. Serge says:

    Dear,

    We implemented the accordeon menu in SP2010 and works fine
    Now we want to upgrade to SP201″. I know the masterpages are not compatible, but hat
    I can fix.
    But is it possible to have the accordeon menu working in a SP2013 ?

    thanks
    Serge

  48. Paul McMillan says:

    I am using your code on my site and i think its awsome. My only problem is that i would like the subsite or page that is selected by the user to remain open and shows as the selected page. Could you help me with direction as what i would need to do.

Trackbacks for this post

  1. How to do an accordion effect to quick launch menu with jQuery in Sharepoint 2010 « Paujas
  2. ??? ??????? (Arash Aghajani) : ??? ???? ? SharePoint 2013 ? ???????? ?????? ????? ?? ? ??? ?????? ????

Got something to say? Go for it!