Home > SharePoint 2010 > Expand Collapse Sharepoint 2010 Quick Launch Menu

Expand Collapse Sharepoint 2010 Quick Launch Menu


Hi all,

try this example to Expand Collapse SharePoint 2010 Quick Launch Menu

First : Open SharePoint Site using SharePoint Designer

Second : Click on Master Pages from Site Objects and Select V4.Master then right click and Edit

Third : Add the following Script


<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
 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>

Then Save and Open your site

Hope this helps

Good Luck.

Advertisements
Categories: SharePoint 2010
  1. rajeshvr
    April 24, 2013 at 10:13 am

    Hello.

    I followed your post. its really awesome.
    but if i have statisdisplaylevels is 3.. then alignment problem is coming.. please help me it is very urgent

    • yasserzaid
      May 8, 2013 at 10:33 am

      @rajeshvr : i’ll try to provide you example soon

  2. Praveen
    September 4, 2013 at 6:20 am

    this is awesome… just copy past and its working… many thanks.

  3. Ivan Munoz
    October 15, 2013 at 9:41 pm

    but if you do click on a link on the second level all contracts again, is there any way to leave the link to which I clicked expanded. thanks

  4. June 5, 2014 at 9:00 am

    Thanks So much

  5. August 23, 2014 at 9:17 am

    Thanks so much..
    but it’s not working in IE… please help me..

  6. Prety Jain
    November 17, 2014 at 10:53 am

    Where to add script?

    • yasserzaid
      January 9, 2015 at 1:45 pm

      @Prety Jain Click on Master Pages from Site Objects and Select V4.Master then right click and Edit

  7. Ha Le
    February 19, 2015 at 5:16 pm

    this works. thank you. How can I not show the (#) next to the + sign? dont really need this, and also, i’m getting the “secure content display” thing everytime I load the page. how do i make the browser ignore this?

  8. Ha Le
    February 19, 2015 at 5:20 pm

    also, clicking on a child link will collapse the menu, how can i keep it expanded?

  9. mrinvertigo
    June 3, 2015 at 4:17 pm

    @Ha Le Delete (‘, $this.children().length, ‘) in order to remove the (#) next to the + sign.

    • mrinvertigo
      June 3, 2015 at 4:19 pm

      it took out my code in the comment above >.< Just delete the entire span tag containing the code above and it will remove the number next to the + sign.

  10. meena
    August 3, 2015 at 10:20 am

    Hi..I pasted this…Instead of “Collpase& “Expand” image I get not Images

    • yasserzaid
      August 20, 2015 at 11:19 am

      You can upload Images to any document Library and use path of it

      Thank you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: