Supporters of End User
Web

JQuery for Everyone: Accordion Left Nav

 
Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories: 
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>

Comments

Kanwal

JQuery for Everyone: Accordion Left Nav

Mark, great post. I have done this for two clients. Integration of SharePoint navigation with jQuery.

If your visitors would like to expand the menu with a mouseover rather than click, change the following line:

menuHd.click(function () {

to the this:

menuHd.mouseover(function () {

This code doesn't provide the best behavior, as you need to workout all possibilities, but it does open user minds to what is possible. I will be starting a blog focused on branding SharePoint, that will help designers / developers alike.

Posted 03-Dec-2008 by Kanwal
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

Actually, the article is by Paul, moderator of Stump the Panel, but I'll take credit if you'd like. Nice job, Paul... potential workshop material. -- Mark

Posted 03-Dec-2008 by EndUserSharePoint
eric

JQuery for Everyone: Accordion Left Nav

This is great!

Posted 03-Dec-2008 by eric
Robin

JQuery for Everyone: Accordion Left Nav

2 Thumbs Up!

Posted 03-Dec-2008 by Robin
Martin Edelius

JQuery for Everyone: Accordion Left Nav

Really amazing stuff. Not so much what it does but how simple it is to do it.

Posted 03-Dec-2008 by Martin Edelius
Chris

JQuery for Everyone: Accordion Left Nav

This is no longer necessary with jQuery UI.

Posted 04-Dec-2008 by Chris
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Chris,

jQuery UI's accordion (from what I've seen) is based on a predictable or classed DOM.

I know you've peaked under the hood--SharePoint is anything but pretty in the dynamically generated left nav.

It's a minefield of nested tables, id/classless elements, and kludgey CSS. Since we don't have control over the HTML OOB, I don't think jQuery UI makes this process easier.

Posted 04-Dec-2008 by AutoSponge
Chris

JQuery for Everyone: Accordion Left Nav

Hey Paul,

I didn't mean to demean your work. This is impressive jQuery from one jQuery'er to another. You can specify markup to be used such as:

$("div#my_accordion").accordion({ header: "h3" });

You're right though that sometimes it's easier just to use the horrendous markup SP sends to the browser. If someone asked me to do an accordion I'd make them use the CSS Friendly Adapters.

Posted 04-Dec-2008 by Chris
MOSSLover

JQuery for Everyone: Accordion Left Nav

This post looks a little cleaner than the version I created with a co-worker several months ago at my old job. I think I'm going to give it a try on my VPC sometime in the next few weeks. Good job Paul!

Posted 04-Dec-2008 by MOSSLover
Ari

JQuery for Everyone: Accordion Left Nav

How would the code look like if the Google API would not be used? Installed the jQuery for SharePoint from http://www.codeplex.com/smarttools

Posted 04-Dec-2008 by Ari
youugyz

JQuery for Everyone: Accordion Left Nav

This is great.. since it easy way to make accordion menu..

somebody know how to show/expand the menu from begining?

Posted 04-Dec-2008 by youugyz
Pimp my MOSS Navigation - by JQuery « Murratore’s Weblog

JQuery for Everyone: Accordion Left Nav

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

Posted 04-Dec-2008 by Pimp my MOSS Navigation - by JQuery « Murratore’s Weblog
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Chris,

I forgot to mention, another issue I found with the WSS DOM and jQuery: if you use slideToggle (as I did originally), FireFox reduces the width of the toggle'd element. This causes the border-top to shrink and the "lines between menu options" gets funky. I figured out it's because slideToggle makes elements visible with display="block".

I see that as an error, it should be display="" which is what show() does. Without testing, jQuery UI may have the same problem since I'm sure it uses slide or some other animation combination.

(To demonstrate, you can probably replace show/hide with slideToggle in the script above).

Let me know if you find out that jQuery UI doesn't do this, I'm always interested in learning new ways of doing things.

Thanks,
Paul

Posted 04-Dec-2008 by AutoSponge
SharePoint Daily

JQuery for Everyone: Accordion Left Nav

SharePoint Daily for December 4, 2008... Top News Stories Microsoft Puts Datacentres on Wheels (ZDNet) In a blog posting on Tuesday, Microsoft...

Posted 04-Dec-2008 by SharePoint Daily
Chris

JQuery for Everyone: Accordion Left Nav

Paul,

Well without looking at I know that similar behavior happens when the toggled element has padding on it. That's why you nest the toggled element in another element.

Article

Is that not what you're referring to? Also, jQuery UI are just bits of functionality built on top of the API. This sounds like an issue with the standard API.

Posted 04-Dec-2008 by Chris
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Chris,

That's good to know. The elements I'm talking about do have padding but I think this hint refers to problems when you hide the element. In this case, the problem occurs when you hide then expose (since I hide onLoad, making a submenu visible shows the problem).

If this is a problem with the core API, someone much smarter than me will have figured it out. Maybe there's a reason slideToggle displays "block." *shrug*

Posted 04-Dec-2008 by AutoSponge
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Ari,

I think the smarttools option adds the script library to your master pages, so you probably don't need the top 5 lines of that script. Check your page source to see if "jquery" appears in a script tag anywhere to make sure.

Posted 04-Dec-2008 by AutoSponge
AutoSponge

JQuery for Everyone: Accordion Left Nav

@youugyz,

I'm not sure what you mean. However, if you want to start with all of those submenus visible, take out the line under //hide submenus.

Posted 04-Dec-2008 by AutoSponge
Daily Blog Post 12/04/2008 « Murratore’s Weblog

JQuery for Everyone: Accordion Left Nav

[...] JQuery for Everyone: Accordion Left Nav : End User SharePoint [...]

Posted 04-Dec-2008 by Daily Blog Post 12/04/2008 « Murratore’s Weblog
Kirsten Coeur

JQuery for Everyone: Accordion Left Nav

Hi Paul,

I'm so thrilled with your tip! I've been wishing I could do this with my menus. I wonder, can you tell me how I might get rid of the warning, "This page contains both secure and nonsecure items." I copied the file "jsapi" into my document library and linked to it from my web part to see if that would eliminate the warning message, but maybe there is another step? I am not a programmer (other than some html) and am not familiar with jQuery. Maybe I just have to live with the warning message - it's worth it for the accordion menu. :-)

Posted 05-Dec-2008 by Kirsten Coeur
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

Kirsten - Let me jump in and help Paul on this one because I already know your environment.

The security warning pops up because the script is pointing outside your local environment, which is a secure server (https), to the google API script. To get rid of the security warning, download the jQuery script, install it in a document library on your site and then replace the call to the google javascript with the location of your script.

Now you're pointing locally and this will do away with the security warning.

Mark

Posted 05-Dec-2008 by EndUserSharePoint
Chris

JQuery for Everyone: Accordion Left Nav

Mark - or you could change your IE security settings. If you're getting that message chances are you're missing out on a lot of content.

But you're right on the best approach.

Posted 05-Dec-2008 by Chris
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Kristen,

Great question. The warning comes from "mixed content" (both SSL and non-SSL) on the page. For an SSL site, you should use the copy of jQuery in your local library replacing the SRC in the first SCRIPT tag. Then delete the second SCRIPT tag (4 lines).

Let me know how it goes,
Paul

Posted 05-Dec-2008 by AutoSponge
Kirsten Coeur

JQuery for Everyone: Accordion Left Nav

Thanks to all three of you for your responses - and so timely! I had already changed the SRC in the first SCRIPT tag so that it was pulling from my local library, but didn't know I needed to delete the second SCRIPT tag. So, now it works beautifully. Thanks a million, Paul!

Best regards,
Kirsten

Posted 05-Dec-2008 by Kirsten Coeur
Michael Greth MVP SharePoint Blog

JQuery for Everyone: Accordion Left Nav

SharePoint Kaffeetasse #98... Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a...

Posted 05-Jan-2009 by Michael Greth MVP SharePoint Blog
steve0 - Sharepoint Beginner

JQuery for Everyone: Accordion Left Nav

I really appreciate the work that you have done with the Accordian Left Nav and its GREAT!!!! I am currently using this in one of my Sharepoint portals. My question is how do you keep the menu expanded for a menu item when its clicked. How would this be written in jQuery. I have tried and have had no luck. You help would be very much appreciated.

Posted 06-Jan-2009 by steve0 - Sharepoint Beginner
Bobby

JQuery for Everyone: Accordion Left Nav

I wanted this to behave a bit more like Outlook and only allow one menu to be expanded at a time so I added the following after the } else {

menuRows.filter("[id='']").hide();
menuHd.find("td:last").css(cssClosed);

May not be the best way to do it since I am just learning jquery but it does work for me atleast

Posted 07-Jan-2009 by Bobby
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Bobby,

That's great! My examples are intentionally simplified. I learned JavaScript over the last year and jQuery in only the last couple of months by studying real-life examples. If you can take my examples and make them your own, you're quickly learning this stuff--and that's exciting.

Posted 08-Jan-2009 by AutoSponge
Richard Duffy

JQuery for Everyone: Accordion Left Nav

I have been trying to insert this code into the default.master page, but nothing seems to be happening.

Where (between which lines of code) would I need to insert the script?

Posted 11-Jan-2009 by Richard Duffy
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Richard,

Right after

Posted 11-Jan-2009 by AutoSponge
Richard Duffy

JQuery for Everyone: Accordion Left Nav

I inserted it into default.master where you instruct, but it only does it for the home page, not on any other pages - am I doing something wrong?

Posted 12-Jan-2009 by Richard Duffy
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Richard,

Can you tell me how you're doing the edits?

Posted 12-Jan-2009 by AutoSponge
Richard Duffy

JQuery for Everyone: Accordion Left Nav

Hi,

I am using SharePoint Designer to make the edits. I made a copy of the default.master before doing any changes and can make it work for the homepage but not for any other pages in that site collection.

I have tried this on our live environment, and on a private testing environment, but to no joy!

Posted 18-Jan-2009 by Richard Duffy
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Richard,

It could be a publishing thing.

However, for a global change (and to keep your .master page out of the database), you may want to add this to your .master page in the file system.

Copy the file first to make a backup. Then edit the file in any text/html editor (opening it from Open > Site in SPD will not work on the file system file, it creates a copy that goes into the database).

Try this on your test environment first. And revert the changes from SPD (that will overwrite the changes to the file system).

Posted 18-Jan-2009 by AutoSponge
OneOfSix

JQuery for Everyone: Accordion Left Nav

Add Links to SharePoint Wiki Toolbar using jQuery... ...

Posted 22-Jan-2009 by OneOfSix
Cimares

JQuery for Everyone: Accordion Left Nav

Paul,

I've placed your block of code onto my default.master and it works beautifully all the time my VPC can see the net and can use google.

As most of the time, I'm not working on a network connection, I've downloaded jquery-1.3.1.js and added a reference to it in my masterpage and removed the top 5 lines. This is working fine as if I add a document.ready function to trigger an alert, I see my alert pop up.
It does however stop the accordion behaviour. Any ideas or a pointer on troubleshooting?

Paul.

Posted 06-Feb-2009 by Cimares
AutoSponge

JQuery for Everyone: Accordion Left Nav

I had to update the web part's code for jquery 1.3. Where I used ("[id='']") change it to (":not([id])") and where I used ("[id!='']:has(+tr[id=''])") change to ("[id]:has(+tr:not([id]))")

I think that's all the changes.

Posted 07-Feb-2009 by AutoSponge
SharePoint QuickLaunchExtender « Jorge Dieguez Blog

JQuery for Everyone: Accordion Left Nav

[...] 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) [...]

Posted 20-Feb-2009 by SharePoint QuickLaunchExtender « Jorge Dieguez Blog
Jorge Dieguez Blog

JQuery for Everyone: Accordion Left Nav

SharePoint QuickLaunchExtender... Codeplex sigue siendo un lugar para encontrar cosas interesantes para SharePoint:-), QuickLaunchExtender...

Posted 20-Feb-2009 by Jorge Dieguez Blog
Bill

JQuery for Everyone: Accordion Left Nav

Of note: this doesn't appear to work with the downloaded version of jquery 1.3.2. I had it installed in a document library and properly referenced but the menu wouldn't expand. When I used version 1.2.6 I had no problems.

Posted 23-Feb-2009 by Bill
Tony

JQuery for Everyone: Accordion Left Nav

Hi Bill. I noticed the same thing. Version 1.3 or later and the menu headers display properly, but they do not open (and assume they do not close, but since can't open...), even including the changes Paul notes on 6 Feb. [Is that 2 or 3 replacements in the code?? Either way, does not seem to work for me with jquery 1.3]

Also interesting is that I left in the changes for 1.3 and switched back to 1.2.6 and now it works again (which makes sense, so maybe not so interesting).

Also, if you add: "cursor": "hand" to each of the 3 variables cssInit, cssClosed, cssOpen, you'll get the hand cursor right over the accordian images.

Posted 27-Feb-2009 by Tony
Tony

JQuery for Everyone: Accordion Left Nav

I've seen other posts indicating that the accordian menu and other jquery wifgets don't play well toegether due to differences in the jquery version. I'm using the preview pane with the accordian, and either one works or the other doesn't,d epending on which version of jquery I use. If I use 1.2.6, the preview does not work completely (for grouped lists not at all, and the last item on any other list will not preview).

If I switch to 1.3, then the preview pane works fine, then the accordian menu stops working.

I can't figure out the changes for either to get both to work in either version.

Posted 27-Feb-2009 by Tony
Tony

JQuery for Everyone: Accordion Left Nav

OK, forget trying to debug this. I switched to version 1.3.1, now EVERYTHING works.

Posted 27-Feb-2009 by Tony
Blog del CIIN

JQuery for Everyone: Accordion Left Nav

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...

Posted 02-Mar-2009 by Blog del CIIN
WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología…

JQuery for Everyone: Accordion Left Nav

[...] JQuery for Everyone: Accordion Left Nav. Fuente: EndUser SharePoint.com. [...]

Posted 02-Mar-2009 by WSS 3.0 & MOSS: Recopilatorio de enlaces interesantes (XXVI)! « Pasión por la tecnología…
Vinny

JQuery for Everyone: Accordion Left Nav

For jquery-1.3.2, there is a change to how :visibility is reported... change
if (nextTR.is(':visible')) {
to
if (nextTR.css("display") != "none") {

may not be the best way to do it, but it works.

Posted 13-Mar-2009 by Vinny
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Vinny,

Thanks for the update. I've noticed some subtle changes along the way that break stuff. A much of a hassle as that is, it's still worth it to me in how much faster I can develop solutions.

Posted 13-Mar-2009 by AutoSponge
sarath

JQuery for Everyone: Accordion Left Nav

Nice tip,

Is there a way to expand any one region say, 'Lists' by default when the page is rendered

Posted 30-Mar-2009 by sarath
AutoSponge

JQuery for Everyone: Accordion Left Nav

Sarath,

The simplest way would be to use jQuery's click method to fire the onclick event for a particular row after the new click event is bound.

That way, if you later add cookie capabilities like I did, it will also register with other functions.

Posted 30-Mar-2009 by AutoSponge
Jason

JQuery for Everyone: Accordion Left Nav

How do you fix this so that when you click on one of the links/sub-links, that list is expanded? It seems like it defaults to close. I would also prefer not to use cokkies to achieve this.

Posted 22-Apr-2009 by Jason
AutoSponge

JQuery for Everyone: Accordion Left Nav

Jason,

Without cookies, you have to pass a query string parameter that the accordion script watches for and sets the appropriate section to open. If you have the exact same left nav on every site using that .master, you can add the script to the .master and pass an integer that represents the position number of the header in the array of headers. Otherwise, there are no id's to use, so it means a further customized master.

Posted 22-Apr-2009 by AutoSponge
Jason

JQuery for Everyone: Accordion Left Nav

Thanks for the reply Auto! Forgive my stupidity, but I have no idea how to do this. Can you show me what and where in the above script I need to add this?

Lastly, pasting the above code Right after yields nothing. The only way I have been able to get this to work is to paste at top of page before

Posted 22-Apr-2009 by Jason
Jason

JQuery for Everyone: Accordion Left Nav

Yes we do have the exact same left-side navigation throughout the site. Sorry I got cut off above. I meant to say pasting the above code Right after yields nothing. The only way I have been able to get this to work is to paste at top of page before

Posted 23-Apr-2009 by Jason
sarath

JQuery for Everyone: Accordion Left Nav

Auto

In one of your postings you had included cookie code for Accordian. It works fine as a session based cookie. What should I do to make it persistent cookie? Any pointers will help

Thanks

sarath

Posted 24-Apr-2009 by sarath
Kirsten Coeur

JQuery for Everyone: Accordion Left Nav

Hello all,

I have followed this thread with interest, thanks to all of you who have contributed.

Would it be possible to get the code with its various modifications since the first posting in a 'clean' version? Not being a programmer, I haven't been able to figure out why mine is no longer working... I've got the newer 'jquery-1.3.2'.

Thank you!

Posted 24-Apr-2009 by Kirsten Coeur
AutoSponge

JQuery for Everyone: Accordion Left Nav

@sarath,
Good article on cookies: http://www.quirksmode.org/js/cookies.html

@Kirsten Coeur,
This is the only published version, the other version was only released to those attending the workshop.

@Jason,
Check out Tony's article for .master changes: http://www.endusersharepoint.com/?p=1468

If you use the cookies, setting a section to click on load will open OR close depending on the cookie state. If you're using cookies, you need to check for visibility before you click.

Posted 27-Apr-2009 by AutoSponge
Jason

JQuery for Everyone: Accordion Left Nav

Quote: "Without cookies, you have to pass a query string parameter that the accordion script watches for and sets the appropriate section to open. If you have the exact same left nav on every site using that .master, you can add the script to the .master and pass an integer that represents the position number of the header in the array of headers. Otherwise, there are no id’s to use, so it means a further customized master."

Can you show me how to go about accomplishing this, and where in the script to add it to? We do have the same left navigation throughout the entire site. Thanks for you help so far btw- we're almost there!

Posted 27-Apr-2009 by Jason
JQuery for Everyone: Accordion Left-nav with Cookies Speed Test | End User SharePoint

JQuery for Everyone: Accordion Left Nav

[...] 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 [...]

Posted 14-May-2009 by JQuery for Everyone: Accordion Left-nav with Cookies Speed Test | End User SharePoint
sietse

JQuery for Everyone: Accordion Left Nav

Hi,
Great script!!
Is it possible to let the script "remember"the last menu item a user has opened?

hope u can help me!

thanks

Sietse

Posted 25-Jun-2009 by sietse
AutoSponge

JQuery for Everyone: Accordion Left Nav

@sietse,

Check out the more recent article: http://www.endusersharepoint.com/?p=1640

Posted 29-Jul-2009 by AutoSponge
Jeroen Ritmeijer

JQuery for Everyone: Accordion Left Nav

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

Posted 30-Jul-2009 by Jeroen Ritmeijer
Frank

JQuery for Everyone: Accordion Left Nav

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

Posted 30-Jul-2009 by Frank
AutoSponge

JQuery for Everyone: Accordion Left Nav

@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.

Posted 30-Jul-2009 by AutoSponge
AutoSponge

JQuery for Everyone: Accordion Left Nav

@Jeroen Ritmeijer,

Cool!

Posted 30-Jul-2009 by AutoSponge
Frank

JQuery for Everyone: Accordion Left Nav

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

Posted 30-Jul-2009 by Frank
Jason

JQuery for Everyone: Accordion Left Nav

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.

Posted 24-Aug-2009 by Jason
AutoSponge

JQuery for Everyone: Accordion Left Nav

@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

Posted 24-Aug-2009 by AutoSponge
Teddi

JQuery for Everyone: Accordion Left Nav

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?

Posted 15-Sep-2009 by Teddi
JDizzle

JQuery for Everyone: Accordion Left Nav

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!

Posted 16-Sep-2009 by JDizzle
AutoSponge

JQuery for Everyone: Accordion Left Nav

@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."

Posted 16-Sep-2009 by AutoSponge
webcoda

JQuery for Everyone: Accordion Left Nav

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

$(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 (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.

Posted 07-Oct-2009 by webcoda
Ron

JQuery for Everyone: Accordion Left Nav

HI Paul
How come i cant see code for Jquery ?

Thanks
Ron

Posted 09-Dec-2009 by Ron
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

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

Posted 09-Dec-2009 by EndUserSharePoint
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

Ron - Should be available now. -- Mark

Posted 09-Dec-2009 by EndUserSharePoint
Ron

JQuery for Everyone: Accordion Left Nav

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

Posted 09-Dec-2009 by Ron
Walter

JQuery for Everyone: Accordion Left Nav

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 :)

Posted 10-Dec-2009 by Walter
Hien Nguyen

JQuery for Everyone: Accordion Left Nav

@autosponge

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

Posted 13-Jan-2010 by Hien Nguyen
Kurt

JQuery for Everyone: Accordion Left Nav

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

Posted 15-Jan-2010 by Kurt
AutoSponge

JQuery for Everyone: Accordion Left Nav

@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.

Posted 27-Jan-2010 by AutoSponge
Yeva

JQuery for Everyone: Accordion Left Nav

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.

Posted 02-Feb-2010 by Yeva
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

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/

Posted 02-Feb-2010 by EndUserSharePoint
jQuery for Everyone | Halwsa.Net

JQuery for Everyone: Accordion Left Nav

[...] JQuery for Everyone: Accordion Left Nav [...]

Posted 12-Feb-2010 by jQuery for Everyone | Halwsa.Net
Oscar

JQuery for Everyone: Accordion Left Nav

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..

Posted 23-Mar-2010 by Oscar
Mithun

JQuery for Everyone: Accordion Left Nav

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...

Posted 02-Apr-2010 by Mithun
My slides from Slovenian SharePoint Conference 2009 | SharePoint Use Cases

JQuery for Everyone: Accordion Left Nav

[...] [Solution] JQuery for Everyone: Accordion Left Nav [...]

Posted 12-Apr-2010 by My slides from Slovenian SharePoint Conference 2009 | SharePoint Use Cases
Mary Grace Hune

JQuery for Everyone: Accordion Left Nav

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?

Posted 23-Apr-2010 by Mary Grace Hune
EndUserSharePoint

JQuery for Everyone: Accordion Left Nav

Mary Grace,

Put this little css markup in a Content Editor Web Part on the page you want to remove the quick launch area:




.ms-leftareacell, .ms-titlearealeft {
display: none;
}

Posted 23-Apr-2010 by EndUserSharePoint
Mary Grace Hune

JQuery for Everyone: Accordion Left Nav

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.

Posted 23-Apr-2010 by Mary Grace Hune
chiqnlips

JQuery for Everyone: Accordion Left Nav

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

Posted 15-Jul-2010 by chiqnlips
Rakhi

JQuery for Everyone: Accordion Left Nav

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.

Posted 25-Aug-2010 by Rakhi
Sandeep

JQuery for Everyone: Accordion Left Nav

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 ??

Posted 24-Sep-2010 by Sandeep
Joni

JQuery for Everyone: Accordion Left Nav

I pasted the code into a new web part and it worked. The next time I opened the website, it had returned to its original status despite the code remaining in the web part. I deleted the practice website altogether and started over, repeating the exact same steps, and now the code doesn't have any effect at all.
 
WSS, IE 8.0 - any suggestions?
 
I cannot send a URL as it is on our intranet.

Posted 26-Jan-2011 by Joni
Adam Jukes

Help please?

Hi
 
What do i need to do so it shows the first the sub menu in the first heading when page is loaded?
 
Also how do i show arrows on the headings?

Posted 27-Jun-2011 by Adam Jukes
Sneha

Help?

It is not working on firefox. can u pls let me know the workaround?

Posted 20-Jul-2011 by Sneha
vg

Issue

This functionality expands the menu when clicking on the image but when clicked on the link next to the image, this will refresh the page and the dropdown image is lost. How do I make sure I don't loose the changes even if the hyperlink is clicked.
 

Posted 29-Aug-2011 by vg
Abdullah

filter the rows in SP 2010

Thanks for the great post. I've done something similar in SharePoint 2010. i used it like this: var menuRows = $("div.menu-vertical>ul.root>li.static>a span.menu-item-text"); the problem is when i want to filter the Headers without sub links, i can't use the below code because SP 2010 dosn't use tables anymore. var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])"); so, how can i filter it in SP 2010?

Posted 16-Oct-2011 by Abdullah
Mary

no internet connection

hi,
Great code, thanks, but I need to reference local copy of jquery.
Which one should I download?

Posted 07-Nov-2011 by Mary
Mary

no internet connection

hi,
Great code, thanks, but I need to reference local copy of jquery.
Which one should I download?

Posted 07-Nov-2011 by Mary
Mangesh Kshirsagar

I have made few changes to work it with all required functionality

Hi,
I have made couple of changes to work it like an actual accordian menu which will keep one node at a time open, remember selected item and open that node on the page load, will work on the header menu table and sub menu and will have CSS to distinguish between single header menus and header menus with sub menus. Here is the script
One can create separate js fine containing this script. Add reference of this js file and any version of jquery.js file in to your master file and that’s it.......
///<reference path="jquery-1.2.6-vsdoc.js"/>
 
//Starts when DOM is ready
$(function(){
     
 //For each Quick Launch navigation sub menu:
 $("table.ms-navSubMenu2").each(function(){
  //Find any navigation items under the sub menu that have been selected.
  var selectedNavItems = $(this).find("a.ms-selectednav");
 
  //Find the corresponding navigation header of the current sub menu being processed
  var menuHeader = $(this).parents("tr:eq(0)").prev("tr").find("table.ms-navheader:eq(0)");        
  if ($(menuHeader).hasClass("ms-selectednavheader") || selectedNavItems.length > 0)
  {
         //if the navigation header for this sub menu is selected or if there are any
         //selected navigational items in this submenu, show the submenu.
         $(this).parents("tr:eq(0)").prev("tr").css({"background-image": "url('/_layouts/images/blk_dwn.gif')","background-repeat": "no-repeat","background-position": "100% 50%","cursor": "pointer" });
   $(this).show();
  }
  else
  {
   //otherwise, hide the submenu
   $(this).parents("tr:eq(0)").prev("tr").css({"background-image": "url('/_layouts/images/blk_rgt.gif')","background-repeat": "no-repeat","background-position": "100% 50%","cursor": "pointer" });
   $(this).hide();
  }
 });
     
    //When a user clicks a navigation header, the user should be taken directly
    //to the site link. The javascript event handler to hide/display the submenus
    //should not be triggered.
    $("a.ms-navheader").click(function(e){
            var subMenu = $(this).parents("tr:eq(0)").next("tr").find("table.ms-navSubMenu2:eq(0)");
            if (subMenu.length > 0)
            {
                //only if we have a submenu should we hide the other submenus and show the current one.
                 if(subMenu.is(':visible'))
                 {
                    subMenu.hide("slow");
                 }
                 else
                 {
                    $("table.ms-navSubMenu2").hide("slow");
                    subMenu.show("slow");
                 }
            }
           // e.stopPropagation();
        });
 //When the user hovers over the navigation header, it would be nice
 //to have an indicator that they can click on the header. Usually,
 //browsers use the hand icon to indicate clickable items.
    $("table.ms-navheader").hover(function(e){
        $(this).css("cursor", "hand");
    }, function(e){
        $(this).css("cursor", "default");
    });
    //Finally, this adds a click event handler for the navigation header table
    $("table.ms-navheader").click(function(e)
    {     
        var subMenu = $(this).parents("tr:eq(0)").next("tr").find("table.ms-navSubMenu2:eq(0)");
        //var subMenuPrev = $(this).prev("tr").find("table.ms-navheader:eq(0)");
       
        if (subMenu.length > 0)
        {
             if(subMenu.is(':visible'))
             {
                $(this).parents("tr:eq(0)").css({"background-image": "url('/_layouts/images/blk_rgt.gif')","background-repeat": "no-repeat","background-position": "100% 50%","cursor": "pointer" });
                subMenu.hide("slow");
             }
             else
             {
             //only if we have a submenu should we hide the other submenus and show the current one.
             $("table.ms-navSubMenu2").closest("tr").prev("tr").css({"background-image": "url('/_layouts/images/blk_rgt.gif')","background-repeat": "no-repeat","background-position": "100% 50%","cursor": "pointer" });
             $("table.ms-navSubMenu2").hide("slow");
             $(this).parents("tr:eq(0)").css({"background-image": "url('/_layouts/images/blk_dwn.gif')","background-repeat": "no-repeat","background-position": "100% 50%","cursor": "pointer" });
       subMenu.show("slow");
   }
  }
 
    });
});

Posted 01-May-2012 by Mangesh Kshirsagar
Evgeny Victorov, victorov.pro

Awesome!

@Mangesh, thanks a lot! Your solution is fantastic and finally have worked for me after hours of googling and trying out many others. Could I post it to my blog referring to you? Or maybe you have a page with it so I could refer ot it?

Posted 27-Feb-2013 by Evgeny Victorov, victorov.pro
Randall Anthony

A perhaps stupid question...

I've just taken over management of a rather large SharePoint intranet site. It needs a lot of help, and I would like to implement this dandy solution. Tested it and it works fine - except for one thing. In their various Quick Launch Menus, the header rows tend to be links - not simple headings. So, if you click on that link, it opens the submenu - and then takes you to that linked page. Or, if the heading is for the page you are on, it opens the submenu - and then re-loads the page, which closes the menu! So, the stupid question is... Is this solution, then, predicated on the headings NOT being links? And, if so, I will need to reconfigure the menus to not have linked headings - right? I'm an experienced designer but am new to SharePoint. Don't be cruel!

Posted 19-Apr-2013 by Randall Anthony
Z

Applying accordian menu globally

How do you apply this globally through out a site?

Posted 15-May-2013 by Z

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: