JQuery for Everyone: Accordion Left Nav

Last night, I set out on a mission; a mission to create an accordion-style left navigation menu for my WSS test site. Mission complete. If you can copy/paste, you can see it in action. Since I used Google’s API to load jQuery, you don’t even need to download the library file.

First, look at your left nav. If you changed it from the out-of-the-box setup, make sure you have “headers” and “submenus” that make sense. For example, Documents should appear on top of a bulleted list of document libraries.

Obviously, if you want the accordion-style menu for all pages, you should work it into the default.master. For now, we can work with a test page by adding a Content Editor Web Part (CEWP) to the page. Add the code below to the web part’s Content Editor (source). Now your menu should look like this.

When you click on the menu header box with the down arrow image, it exposes the submenu below it and swaps the image with an ‘x’. Likewise, clicking the header with the ‘x’ will hide the associated submenu.

Here’s the code:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load jQuery
  google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">
$(function(){
//initialize menus
    var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
    var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
    //set img path for when submenu is hidden
    var closedImg = "/_layouts/images/Menu1.gif";
    //set img path for when submenu is visible
    var openedImg = "/_layouts/images/ptclose.gif";
    var cssInit = {
        "background-image": "url('"+closedImg+"')",
        "background-repeat": "no-repeat",
        "background-position": "100% 50%"
    }
    var cssClosed = {"background-image": "url('"+closedImg+"')"}
    var cssOpen = {"background-image": "url('"+openedImg+"')"}
    //hide submenus
    menuRows.filter("[id='']").hide();
    //apply initial inline style to menu headers
    menuHd.find("td:last").css(cssInit);
    menuHd.click(function () {
        var styleElm = $(this).find("td:last")
        var nextTR = $(this).next("tr[id='']");
        if (nextTR.is(':visible')) {
            nextTR.hide();
            styleElm.css(cssClosed);
        } else {
            nextTR.show();
            styleElm.css(cssOpen);
        }
    });
});
</script>

View all entries in this series: PaulGrenier-JQuery for Everyone»

Entries in this series:

I recommend SharePoint resources daily on my twitter account here.

Posted by AutoSponge on Wednesday, December 3, 2008 at 9:37 am
Filed under Tips and Tricks · Tagged with

Please Join the Discussion

91 Responses to “JQuery for Everyone: Accordion Left Nav”

Jeroen Ritmeijer says:

July 30, 2009 at 3:50 am

Very nice.

I have copied the script into our free infuser tool to automatically apply this script to every page in a site collection.

Blogged about it here http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.html

Reply
Frank says:

July 30, 2009 at 9:50 am

Is there away to ‘hide’ the Quick Launch. I would like to do away with it if possible. Hope you can help.

Reply
AutoSponge says:

July 30, 2009 at 10:20 am

@Frank,

If you want it dynamic, try this:
http://www.endusersharepoint.com/STP/topic/dynamically-hiding-left-navigation

If you want it to default to closed, just add leftnav.click() after the toggle method.

Reply
AutoSponge says:

July 30, 2009 at 10:52 am

@Jeroen Ritmeijer,

Cool!

Reply
Frank says:

July 30, 2009 at 11:26 am

Thanks all, I got what I need. Have a great day :)

Reply
Jason says:

August 24, 2009 at 1:25 am

Thanks works 90% of what I needed, now just need to make it stay open to when select page below heading.
Then get the mouseover to work correctly.

Reply
AutoSponge says:

August 24, 2009 at 7:04 am

@Jason,

To “stay open,” I assume you mean between page loads: check out the second generation of this script: http://www.endusersharepoint.com/?p=1640

Reply
Teddi says:

September 15, 2009 at 4:02 pm

This works great in FireFox but does not work in IE 8. It will collapse the children but not expand them back. Any ideas why?

Reply
JDizzle says:

September 16, 2009 at 7:20 am

I believe that is b/c it is using cookies. I wish there was a way to have this accordian w/o using cookies. Every other script I have found onthis site has been a hair short of fulfilling my needs. Great work nontheless!

Reply
AutoSponge says:

September 16, 2009 at 7:51 am

@Teddi,

This is a very old version of the script using an old version of jQuery. If you are using a newer version of the library, it may not work. See a more up-to-date version here: http://www.endusersharepoint.com/2009/05/13/jquery-for-everyone-accordion-left-nav-with-cookies-speed-test/

@JDizzle,
This script does not use cookies. Not sure what you want it to do/not do. Removing cookie functionality only takes adding “//” in front of SetCookie in the newer script.

It’s not difficult to take these examples and “make them your own.”

Reply

webcoda says:

October 7, 2009 at 12:41 am

Had to modify the script to get this to work in IE6 using 1.3.2:

$(function(){
	//initialize menus
	    var menuRows = $("[id$='QuickLaunchMenu'] &gt; tbody &gt; tr");
	    var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
	    //set img path for when submenu is hidden
	    var closedImg = "/_layouts/images/Menu1.gif";
	    //set img path for when submenu is visible
	    var openedImg = "/_layouts/images/ptclose.gif";
	    var cssInit = {
	        "background-image": "url('"+closedImg+"')",
	        "background-repeat": "no-repeat",
	        "background-position": "100% 50%"
	    }
	    var cssClosed = {"background-image": "url('"+closedImg+"')"}
	    var cssOpen = {"background-image": "url('"+openedImg+"')"}
	    //hide submenus
	    menuRows.filter("[id='']").hide();
	    //apply initial inline style to menu headers
	    menuHd.find("td:last").css(cssInit);
	    menuHd.click(function (e) { 

	        var styleElm = $(this).find("td:last")
	        var nextTR = $(this).next("tr[id='']");
	        //changed from if (nextTR.is(':visible')) {
	        if (nextTR.is(':hidden')) {
	            //changed from nextTR.hide();
	            nextTR.show();
	            //changed from styleElm.css(cssOpen)
	            styleElm.css(cssOpen);
	        } else {
	            //changed from nextTR.show();
	            nextTR.hide();
	            //changed from styleElm.css(cssClosed)
	            styleElm.css(cssClosed);
	        }
	        e.stopPropagation();
	        return false;
	    });
	});

Hope this saves someone some time.

Ron says:

December 9, 2009 at 9:27 am

HI Paul
How come i cant see code for Jquery ?

Thanks
Ron

Reply
- EndUserSharePoint says:
  
  December 9, 2009 at 9:32 am
  
  Ron – Still working on that. We’ve got to go through each of the articles and update the code wrapper. Give us a couple days and it will be up. — Mark
  
  Reply
EndUserSharePoint says:

December 9, 2009 at 9:48 am

Ron – Should be available now. — Mark

Reply
Ron says:

December 9, 2009 at 10:12 am

Thanks Mark.
I love the way you set up New version of endusersharepoint

Reply
Walter says:

December 10, 2009 at 1:24 pm

I was wondering if there was an easy way to have all the panels open by default? Or only certain categories? This is going to be such a great addition to my site :)

Reply
Hien Nguyen says:

January 13, 2010 at 4:13 pm

@autosponge

the link http://www.endusersharepoint.com/STP/topic/dynamically-hiding-left-navigation does not work. Do you have the updated one? Thanks.

Reply
Kurt says:

January 15, 2010 at 1:06 pm

Hi,
I’m new to jQuery. How would I change the operation of the accordion so that instead of a click event activation, it would use a hover event?

I understand I need to pass in the over and out functions into the hover function. How do I track down what element the cursor is “over” and when it is “out”?

Is this a terribly hard thing to do in modifying the script from above? Thanks in advance for reading this.

Kurt

Reply
AutoSponge says:

January 27, 2010 at 2:40 pm

@Kurt,

It’s not terribly hard to do, but it will take some practice. Firebug helps a lot. Read the toolbox series to get started. However, I’ll warn you that I already made a version with hover and it was terrible. Good luck.

Reply
Yeva says:

February 1, 2010 at 9:56 pm

Hi, understand that this great feature is refering to the google hosted JQuery. However, my sharepoint is on SSL and with reference to the google site will cause the security prompt and depend on the user selection, this feature may not work.
Question, is it possible to host the JQuery on my sharepoint server and reference to it? And how to I go about it ? Thanks for all the help.

Reply
- EndUserSharePoint says:
  
  February 2, 2010 at 8:51 am
  
  I have written a series of articles on how to implement local versions of jQuery in your SharePoint site:
  
  http://www.endusersharepoint.com/2010/01/05/build-a-sharepoint-scripting-resource-center/
  
  Reply
Oscar says:

March 23, 2010 at 2:12 pm

BLOT: This is a great script, but one thing we would like to see is a little “- +” buttons just below or besides View all site content, so that a user can quickly expand all or collapse all with one click. I have seen this for a list view on a regular sharepoint list, but can not find a way to do this on the quick-launch. Does anyone else have a way or want this done also?

Background: We implemented this script and 1/2 the users love it and the other don’t like the collapsed versions and complain of how long it takes them to collapse it on every site. when they open a new Sharepoint session each day..

Reply
Mithun says:

April 2, 2010 at 3:15 pm

Nice post.

How can I achieve the below scenario:

When I click on any of the menu header box, it exposes. Again if click on the second header it should close the previous Menu header (first exposed one).
I mean to say only one menu header should expose at a time.

Please suggest…

Reply
Mary Grace Hune says:

April 23, 2010 at 12:06 pm

I am looking for a way to “hide” and “unhide” the left navigation area on WSS site. I see in one of the posts above a link to http://www.endusersharepoint.com/STP/topic/dynamically-hiding-left-navigation but this link is not working. I also have a site http://vogtland.ws/MarksBlog/?p=14 that has code to put into the Content Editor web part. I tried that and including the link to my hide/unhide images in my Picture Library. But all that is showing up in the Content editor is my html code. Not really sure how that is supposed to work. Any ideas?

Reply
- EndUserSharePoint says:
  
  April 23, 2010 at 12:30 pm
  
  Mary Grace,
  
  Put this little css markup in a Content Editor Web Part on the page you want to remove the quick launch area:
```
<style>

.ms-leftareacell, .ms-titlearealeft {
  display: none;
}
</style>
```
  Reply
  - Mary Grace Hune says:
    
    April 23, 2010 at 12:40 pm
    
    Thanks for the response but it looks like this will remove the area completely. I was interested in the other link here because that seemed like more of a user controlled dynamic option. What I want the user to be able to do is to pin or unpin the left nav.
chiqnlips says:

July 15, 2010 at 3:11 pm

Has anyone found a way to have certain categories close or have some remain open?

Reply
Rakhi says:

August 25, 2010 at 7:02 am

Hi,nice article you posted.it seems to be working fine.I am new to sharepoint.i have small doubt where i need to place this jquery .please could you give more explanation on this.

Reply
Sandeep says:

September 24, 2010 at 5:18 pm

Hi,

I like to collapse only some item in Left Nav. In the give example , we want some thing like this , other than document navSubMenu every item should be collapsed.

Can we do this. If yes how ??

Reply