Quick Tip – jQuery click to expand / collapse Quicklaunch – UPDATED 20/06/2012


Hello everyone, following on from the previous Quick Tip I have yet another cool little snippet of jQuery code to enable a manually collapsable quicklaunch.  Many users who have downloaded my Metro UI masterpage commented if there was a way to have the hover quicklauch accordion replaced with a clickable version.  Well your requests have been answered and below is a snippet that will work on any v4.master page.  I have included some comments within the source code to help you out.

I hope that this code is what you were hoping for, and i will soon be updating the Metro Masterpage for Farm Solutions to include an option to choose your accordion type and a Metro UI version of the code.

As always comments / issues always welcome :)

UPDATE 20/06/2012.

Thanks to Anastacia for pointing out the issue with the script in Firefox.  I have updated the script to fix this issue by placing the anchor in a different location and updating the rest of the script. Please use the new script above which solves the issue.  Chris


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.

12 Comments on "Quick Tip – jQuery click to expand / collapse Quicklaunch – UPDATED 20/06/2012"

  1. Anastacia says:

    Hi Chris! Nice work! But I have some trouble. In IE this script works perfect! But In Google Chrome or FireFox not so good. When I try to expsand menu it just refresh a page. What’s wrong with it?

  2. Thanks for the info..i will look into this and try and find a solution :)

  3. This has now been fixed with an update :)

  4. Anastacia says:

    Thank you so much for quick fix! You’re the best ;)

  5. Tigran says:

    Is there a way to save the state of the collapsed items over postbacks ?

  6. Hi,

    If you wanted to do this you would need to save the state of the item as a cookie against the local site. (problably use the site name as the unique key for the cookie). in the iGoogle interface blog posts there is some code that does some similar things.


  7. Tramanh says:

    Thanks for the tips. I just have one question though. When I click on the expand icon, then select an item from the submenu, it then collapsed. I just wonder if I can have the sub-menu items showing until the collapse icon is clicked.

  8. Raji says:

    Hi i tried out the script it works fine but there is a problem..when i click the sublists its going back to collapsed format..i want to retain it please help me

  9. Ankit says:

    Do you have the code for SharePoint 2013 / share point online? for the same menu settings?

  10. Simi says:

    This works gr8…Thank yiou so much..

  11. WH says:

    I am fairly new to JQuery, but this is a great script and easy to understand. Thanks. I have one problem that I don’t know how to resolve. The expand/collapse gifs don’t appear when the page initially loads. In fact they show up as a red X, like access not available or not found. However, once I click the red X everything is fine, until I go to another page. Then I start all over.

  12. Hi,
    Below article will helps us for providing expand collapse for sharepoint quick launch menu.


Got something to say? Go for it!