Comments on: JQuery for Everyone: Accordion Left-nav with Cookies Speed Test

By: Jim H

Jim H — Sun, 26 Sep 2010 03:57:52 +0000

I tried the change for jQuery 1.3.2 (version I am using) and it does not work – maybe there need to be more specific instructions?. Prior to making the change, the menus show colapsed, then when I click on a header they open up for a second and then go back to closed. Does anyone have a solution to make this work with version 1.3.2?

By: husso

husso — Tue, 25 May 2010 22:28:41 +0000

hi paul,
because i am new to sp2010 i do not know where exactly to put this javascript code
Can you tell us what steps to follow to get this Accordion Left-nav working?

Thanks
husso

By: CRISTY

CRISTY — Wed, 17 Feb 2010 13:43:12 +0000

I replaced the jquery version to 4-1 and now is not working …..

By: Mark

Mark — Thu, 28 Jan 2010 09:12:53 +0000

The images are still there and in the browser I can open them directly with the link from the code. If I try other images they also won’t show (the functionality keeps working). Other ideas?

By: AutoSponge

AutoSponge — Wed, 27 Jan 2010 20:36:27 +0000

@mark,

The urls in this script point to default images installed with WSS. If you don’t have them, moved them, or changed their location, simply update the url or fix the permission issue.

By: Mark

Mark — Mon, 25 Jan 2010 10:27:29 +0000

I can the accordeon to work (it expands and collapses when I click on the heading next to the heading text), but the pictures for opening (+) and closing (-) are not displayed. Any thoughts how to solve this? My knowledge of jQuery does not go much beyond copy/paste, so please, be gentle.

By: CRISTY

CRISTY — Tue, 04 Aug 2009 15:19:46 +0000

Does anybody tried to add ‘help balloons / tool tips / dialog balloons’ or whatever that can be called…. when someone move the pointer over the nav menu and get the a box with comments?

By: Vinny

Vinny — Thu, 16 Jul 2009 16:17:28 +0000

With jQuery 1.3.2 you need to change the following:

if (nextTR.is(’:hidden’)) {
nextTR.show();
styleElm.css(cssOpen);
SetCookie(this.id, “open”, “/”);
} else {
nextTR.hide();
styleElm.css(cssClosed);
SetCookie(this.id, “”, “/”);
}

By: AutoSponge

AutoSponge — Thu, 16 Jul 2009 13:29:53 +0000

@Vinny,

Speed is a funny thing. Sometimes, using a separate SCRIPT tag slows things down because it blocks other elements during loading. If you have a custom CSS already being loaded by the .master, by all means, add the images to a pair of classes and toggle the classes.

By: Vinny

Vinny — Tue, 14 Jul 2009 16:18:32 +0000

Jan is there a reason not to put the img paths directly in the CSS statements? Seems like it would be faster and the only reason to have the variable is to facilitate changing the image, but with it only appearing once or twice in the code, not sure the benefit is worth it.

cssInit = {
"background-image":"url('/_layouts/images/PLUS.gif')",
"background-repeat":"no-repeat",
"background-position":"100% 50%",
"cursor": "pointer"
},
cssClosed = {"background-image":"url('/_layouts/images/PLUS.gif')"},
cssOpen = {"background-image":"url('/_layouts/images/MINUS.gif')"};