jQuery Collapsable Quick Launch – Plugin Update & Cookie States & 2013 Compatibility


Christmas is nearly with us and it has been a long while since my last post. To try and give some people a little Christmas cheer I am releasing part one of my new set of jQuery plugins for many of my Quick Tips that I have posted. Today’s update is to the ability for a user to hide / show the Quick Launch menu. Although the previous version worked well, there were a number of requests for new functionality which I have integrated into my new version. The new version also makes configuration MUCH easier and friendlier for non-techy types.

New Features:

  • Plug-in Architecture based on jQuery Boilerplate
  • Ability to set default state of the Quick launch (HideOnDefault)
  • Quick launch state is now saved across page views using Cookies. This can be turned off.
  • Re-written code.
  • Fully configurable for various scenarios (Have tested on OOTB & Custom Masterpages)
  • 2013 Compatible. I can confirm the plug-in works on the OOTB Seattle.master with no code changes (only plug-in configuration).

How to use:

The quick launch plug-in can be used and applied as follows:


The following default options are available:

No CSS is required for the plugin and the main plugin selector should be the side navigation div that you are hiding. So in the case of SharePoint 2010 this will be “#s4-leftpanel”

Full Usage (2010 / 2013)

2010 Full Usage (OOTB Masterpage)

2013 Full Usage (OOTB Masterpage)

Hope you enjoy this plug in and as always if you have any issues please let me know.


Developer Version : jQuery.LISP.quicklaunch.js

MinifiedVersion : jQuery.LISP.quicklaunch.min.js

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.

14 Comments on "jQuery Collapsable Quick Launch – Plugin Update & Cookie States & 2013 Compatibility"

  1. bpbpbk says:

    Hi, expand/collapse works great in 2010, however, upon collapse, collapse image gets lost somehow and shows up in place of both expand/collapse states. Also, shows up on the top link bar instead of to the right of the quicklaunch.

  2. bpbpbk says:

    Hi, expand/collapse works great in 2010, however, upon collapse, collapse image gets lost somehow and “/_layouts/images/plus.gif” shows up in place of both expand/collapse states. Also, shows up on the top link bar instead of to the right of the quicklaunch.

  3. bpbpbk says:

    Hi! Sorry, disregard my last comment. I had a conflicting script that was changing the collapse/expand images. Works great, however, I’m still having the issue of the expand/collapse showing up on the top link bar in 2010.

  4. bpbpbk says:

    Please disregard all my comments. I’ve had a second look at prepending the image and figured out what was necessary!! sorry!

  5. EM says:

    Tried using this in a standard OOB SP 2013 environment.

    I had to change the Image refs to /_layouts/15/images/filename.gif…they didn’t resolve the way you had it for OOB SP2013.

    However, I still can’t the collapse to function. I see in Fiddler that the script loads OK, but I never get any collapse/expand buttons.

    Does positioning of the script in the master page matter? top of head, and of head, in body?

    Can you post an actual sample OOB master page that includes this script?

  6. Reza says:

    Hi Chris,
    I can not register the quicklaunch plugin and will get this error on sharepoint 2013 (added in seattle.html top of head tag)
    Error: Object doesn’t support property or method ‘quicklaunchHide’

    I used this code:

    $(document).ready(function () {

    Appriciate if you can help me.

  7. Reza says:

    I used this code:

    $(document).ready(function () {

  8. Reza says:

    I referenced this script : h tt p : / / lifeinsharepoint.co.uk/downloads/javascript/jQuery.LISP.quicklaunch.js and jquery as your post.

  9. Sam says:

    Hi Chris,
    I’m not a coding person so please…please update the Metro UI – SharePoint 2010 Masterpage & Solution to have this function. I want to be able to collapse the side bar navigation to left or right.

    Maybe give some instructions on how to put the script to.

  10. Liam says:

    Love this jQuery but having some trouble with it and SP2010 search. Basically, using the toggle while on a search page toggles a large white space between the top link navigation and the content of the page. See screenshot. Has anyone else seen this and/or know of a solution?


  11. Andy says:

    Liam I am also seeing this issue as well as the arrows showing up in modal windows. Any fix to these?

  12. Zach says:

    I am unable to get this to work. I pasted the code below how I have it in my masterpage. I included a few lines before and after the code to show where I put it. I put it in the section.


    $(document).ready(function() {
    collapseImage: ‘/_layouts/images/mewa_leftPage.gif’,
    expandImage: ‘/_layouts/images/mewa_rightPage.gif’,
    prependLocation: ‘.s4-titlerow’,
    mainDiv: ‘#contentBox’,
    leftMargin: 20,
    hideOnDefault: false,
    allowCookie: false,
    cookieName: ‘quicklaunchStatus2013′


    Html Master Page

    https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html, https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html
    https://cohasset.sharepoint.com/sites/test/_catalogs/masterpage/seattle.html, Conversion successful.

  13. motionpotion says:

    Is this collapsing quicklaunch available in your Metro UI soution? How does it perform on iOS/Mobile devices?

  14. Edgar Guerrero says:

    Hi, nice post, I’m not a very good programmer, can you send my a litte step by step guide to implement this in a master page?, please.

Got something to say? Go for it!