Quick Tip – jQuery Collapsable Quicklaunch for SharePoint 2010




Another day, another jQuery Quick Tip.  Today we have a piece of jQuery that will enable an end user to hide the Quicklaunch from view and free up some additional space if you have a lower resolution.  As with my other Quick Tips 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)

The script above is not much more complicated than previous ones but as always i will go through it piece by piece so you are clear as to what is going on.  The first line is getting a hosted version of the jQuery library, obviously if you have this locally then it may be worth updating this reference appropriately.

The first six lines of code are to setup some variables that will be used during the rest of the script.  We first get a reference to the main Right hand content div which in the case of the OOTB masterpage is the s4-ca classed div.  Next we save the size of the left margin of this div so that it can be used later.  We then set the LeftArea div for the item which will be hidden and also define the size of the left margin when collapsed which is what line three is for.  Finally we have two variables that define the expand and collapsed images.

The next line is quite a long one but its nothing complicated.  What we are doing is to the Defined MainArea we are adding our image with a hyperlink on it which is positioned at the top of the parent container.

This final piece of code is the core of the script and contains the click event handler for our dynamically added code shown above.  We first define the click handler, then we toggle the configured LeftArea so that it is hidden.  Now if we stopped there we would have hidden the quicklaunch but the page would not expand to provide any more room.  To fix this we then need to adjust the MainArea left-margin.  Line four first checks if the left section is visible, and then if it is we set the MainArea margin-left to the configured NoLeftMargin otherwise we “reset” to the left-margin that was set on load.  The final two lines updates the image to show the collapse or expand image depending on the status of the LeftArea.

That’s all there is to it.  I hope like previous snippets that this will be useful for someone and if you have any recommendations or suggestions of new functionality that you would like to see then please let me know.  As always your positive comments are always welcomed and keep me working on new content for you.


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 Collapsable Quicklaunch for SharePoint 2010"

  1. Sonia says:

    Thank you so much for this. I was wondering would this be an easy change to make this work for a right column that was not the quick launch?

  2. Troy says:

    This is great! I’m going to try to integrate this into your Metro UI for SharePoint today.

  3. This is already integrated in the FARM Metro UI Solution.

  4. Great post…!!!!!!

  5. Michael Alhilly says:

    Good tutorial.

    Not sure what I’m doing wrong, but this is not working for me. I placed this script in my head section of a OOTB v4 master and nothing’s happening. I verified the jquery file is being loaded. Are these images standard with every SP 2010 install? I don’t have access to the root folder.

  6. Adam Baker says:

    Is thier a way to start with the Quciklauch allready closed, then you click to open?

  7. This is indeed possible. If you leave it with me i can provide an update.


  8. Casey Jones says:

    Excellent post, Christopher. My question is the same as Adam’s– Is their a way to start with the Quick Launch already closed, then you click to open?

  9. Hi Casey,

    This post has now been superseeded by this one : http://www.lifeinsharepoint.co.uk/2012/12/14/jquery-collapsable-quick-launch-plugin-update-cookie-states-2013-compatibility/

    I have developed a far easier to use / configure and minified version for use which has the functionality you require (plus some extras).

    Thanks for the feedback.

  10. Sam says:

    Hi Chris,
    Please update the Metro UI – SharePoint 2010 Masterpage & Solution to have this feature.

  11. Edgar says:

    This works for sharepoint 2013?

  12. I am afraid this has not been tested on SharePoint 2013 currently.

Got something to say? Go for it!