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.

    &lt;script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;    
    &lt;script type="text/javascript"&gt;
    jQuery(function($) {
        //Hide all 
        $('.s4-ql li ul').hide();
        
        //Set the Images up
        var Collapse = "/_layouts/images/collapse.gif";
        var Expand = "/_layouts/images/expand.gif";        

        //Find each top level UI and add reletive buttons &amp; children numbers
         $('.s4-ql ul li').find('ul').each(function(index) {
            var $this = $(this);            
            $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['&lt;a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'&gt;&lt;img src=\'/_layouts/images/expand.gif\'/&gt;&lt;/a&gt;&lt;span style=\'margin-top:5px;float:right;font-size:0.8em;\'&gt;(', $this.children().length, ')&lt;/span&gt;'].join(''));
        });
        
        //Setup Click Hanlder
        $('.min').click(function() {
            //Get Reference to img
            var img = $(this).children();
            //Traverse the DOM to find the child UL node
            var subList = $(this).siblings('ul');
            //Check the visibility of the item and set the image            
            var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;
            //Toggle the UL
            subList.slideToggle();
        
        });                
    });
    &lt;/script&gt;

jQuery(function($) {

//Hide all

$('.s4-ql li ul').hide();

//Set the Images up

var Collapse = "/_layouts/images/collapse.gif";

var Expand = "/_layouts/images/expand.gif";

//Find each top level UI and add reletive buttons & children numbers

$('.s4-ql ul li').find('ul').each(function(index) {

var $this = $(this);

$this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'/_layouts/images/expand.gif\'/></a><span style=\'margin-top:5px;float:right;font-size:0.8em;\'>(', $this.children().length, ')</span>'].join(''));

});

//Setup Click Hanlder

$('.min').click(function() {

//Get Reference to img

var img = $(this).children();

//Traverse the DOM to find the child UL node

var subList = $(this).siblings('ul');

//Check the visibility of the item and set the image

var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;

//Toggle the UL

subList.slideToggle();

});

</script>

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

Christopher Pettigrew

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.

Anastacia says:

June 20, 2012 at 7:13 pm

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?

Christopher Pettigrew says:

June 20, 2012 at 11:16 pm

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

June 20, 2012 at 11:33 pm

This has now been fixed with an update

June 24, 2012 at 10:30 pm

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

Tigran says:

August 30, 2012 at 2:13 pm

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

August 30, 2012 at 2:35 pm

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.

Chris

Tramanh says:

May 21, 2013 at 6:49 am

Hi,
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.
Thanks.

Raji says:

May 23, 2013 at 7:08 am

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

Ankit says:

December 11, 2013 at 9:13 pm

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

Simi says:

April 17, 2014 at 3:02 am

This works gr8…Thank yiou so much..

WH says:

June 9, 2014 at 10:42 pm

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.