Can anyone point me towards a 'ready' jQuery Accordion with CSS that's light and is easy to implement. I do not want to use jQUery UI.
+2
A:
I've deployed something like it here.
Here's the script (cleaned up as meo pointed out) for it:
$(document).ready( function() {
$("div.accordian-text").hide();
$("a.accordian-link").click( function() {
$('div.accordian-text').slideUp()
$(this).next("div.accordian-text").slideToggle();
$(this).toggleClass("active");
});
});
And the markup:
<a href="javascript:void(0);" class="accordian-link">Accordian Trigger</a>
<div class="accordian-text">
<p>Hidden Text in Accordian element</p>
</div>
<!-- Repeat as needed -->
Zack
2010-05-03 08:59:00
There's no CSS needed for this, just format the markup properly and use your site's styles.
Zack
2010-05-03 09:05:19
you could simplify your function by using `slideToggle()` and `toggleClass()` so you could get rid of your `if else`, and you could replace `hasClass()` by `is()`
meo
2010-05-03 09:14:29
Learn somethin' new every day, thanks for pointing that out :) Just added a story to pivotal to rewrite it
Zack
2010-05-03 09:22:03
This is not working for some reason..When I click on the 2nd link, the 1st link does not slide up..please check.
ScG
2010-05-03 09:37:13
+1 your are welcome: there is still optimization possible. you could put the `.toggleClass()` right after the first `$(this)` to avoid selecting the same dom element twice. And you could put just #something in the `href` and call `return false;` at the end of the click function. (or `preventDefault()`)
meo
2010-05-03 09:40:06
@ScG, sorry, that was with the edit that meo suggested, I'd need to add some more code to collapse the old open dive/remove the old active tag. I've rolled it back to the working version.
Zack
2010-05-03 09:43:47
@scg: you have to close all open slides first for that. you can to this by putting: `$('div.accordian-text').slideUp()` at the begging of the click function.
meo
2010-05-03 09:45:23
meo: PUURRRRRFECT..do you blog somewhere?
ScG
2010-05-03 09:47:55
zack: thanks for your response. you can reedit the code again and add what meo suggested
ScG
2010-05-03 09:48:56
ScG: This has been done. Do I still get an answer accept? :P
Zack
2010-05-03 09:56:15
check it out: http://jsfiddle.net/5xb4Q/2/
meo
2010-05-03 09:58:18
@ScG: check my profile :P
meo
2010-05-03 10:03:14
meo: Anyway to highlight this links..like in jQuery UI accordion, the headings are with a background color. How can i do it here?
ScG
2010-05-03 11:14:55
Zack: Yes I will accept the answer in a short while :)
ScG
2010-05-03 11:15:32
ZAck: Sorry meo's answer was spot-on. Thanks for your help too.
ScG
2010-05-03 11:33:57
+2
A:
I have also created an accordion here:
http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/
Sarfraz
2010-05-03 09:06:27
A:
i have corrected some bugs in the version i have posted in the comments, this should work for you.
meo
2010-05-03 10:34:26