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

81 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
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.
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.
AutoSponge says:

July 30, 2009 at 10:52 am

@Jeroen Ritmeijer,

Cool!
Frank says:

July 30, 2009 at 11:26 am

Thanks all, I got what I need. Have a great day :)
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.
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
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?
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!
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.”

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
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
EndUserSharePoint says:

December 9, 2009 at 9:48 am

Ron – Should be available now. — Mark
Ron says:

December 9, 2009 at 10:12 am

Thanks Mark.
I love the way you set up New version of endusersharepoint
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 :)
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.
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
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.
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.
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/

Trackbacks

Check out what others are saying about this post...

Pimp my MOSS Navigation - by JQuery « Murratore’s Weblog says:

December 4, 2008 at 6:22 am

[...] http://www.endusersharepoint.com/?p=985 [...]
SharePoint Daily says:

December 4, 2008 at 9:26 am

SharePoint Daily for December 4, 2008…

Top News Stories Microsoft Puts Datacentres on Wheels (ZDNet) In a blog posting on Tuesday, Microsoft…
Daily Blog Post 12/04/2008 « Murratore’s Weblog says:

December 4, 2008 at 5:32 pm

[...] JQuery for Everyone: Accordion Left Nav : End User SharePoint [...]
Michael Greth MVP SharePoint Blog says:

January 5, 2009 at 5:18 am

SharePoint Kaffeetasse #98…

Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a…
OneOfSix says:

January 22, 2009 at 4:03 pm

Add Links to SharePoint Wiki Toolbar using jQuery…

…
SharePoint QuickLaunchExtender « Jorge Dieguez Blog says:

February 20, 2009 at 12:46 pm

[...] Es muy interesante resisar el código fuente y el uso que se hace de la tecnología jQuery(un breve ejemplo de jQuery para personalizar la barra QuickLanch se puede ver en:JQuery for Everyone: Accordion Left Nav) [...]
Jorge Dieguez Blog says:

February 20, 2009 at 1:20 pm

SharePoint QuickLaunchExtender…

Codeplex sigue siendo un lugar para encontrar cosas interesantes para SharePoint:-), QuickLaunchExtender…
Blog del CIIN says:

March 2, 2009 at 6:20 pm

WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)!…

Siguiendo con la tradición, una vez más os presentamos el clásico recopilatorio de recursos, enlaces…
WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología… says:

March 2, 2009 at 6:25 pm

[...] JQuery for Everyone: Accordion Left Nav. Fuente: EndUser SharePoint.com. [...]
JQuery for Everyone: Accordion Left-nav with Cookies Speed Test | End User SharePoint says:

May 13, 2009 at 11:28 pm

[...] I enjoyed them all and learned a lot from our users. One of the more popular solutions, based on Accordion Left Nav and featured in Tony’s Deployment article, has only one improvement since the original [...]