If you are looking for an easy way to create a jQuery Accordion and don’t wish to use the jQuery UI Accordion, I have created something much simpler that you can use.
I ended up building my own jQuery Accordion after learning how big the include (16kb minified) for the jQuery UI core with Accordion is. I also noticed there is a page flicker as the accordion initiliazes after the dom has loaded. The flicker is hard to debug because the html is rewritten on the fly using jQuery so it makes it hard to style it from to prevent the flicker before page load.
HTML:
jQuery:
$(document).ready(function() {
// put all your jQuery goodness in here.
// Do not instantiate elements until the document has finished loading
//jQuery Easy Accordion
$('.accordion-list:not(:first)').hide();
$('.accordion-list:first').show();
$('.accordion-header:first').addClass('active');
$('.accordion-list:first').addClass('content-active');
$('.accordion-header').click(function () {
$('.accordion-list:visible').slideUp().prev().removeClass('active');
$('.accordion-list:visible').removeClass('content-active');
$(this).addClass('active').next().slideDown();
$('.accordion-list').addClass('content-active');
});
});
If you would like to see a working demo, click here.
You can follow any responses to this entry through the RSS 2.0 feed.
Master
May 23rd, 2010 at 6:58 pm
Thanks for the this, it’s extremely extensive and useful!,do check out the link below
http://www.tutorials99.com
where all tutorials have a Higher page rank and professional.Very helpful for beginners…
Abhi
October 27th, 2010 at 3:37 am
where is the CSS.
Kelly
December 15th, 2010 at 12:12 pm
yeah – no CSS?
commenter
January 27th, 2011 at 4:00 am
Thanks a lot. this is exactly what i was looking for. i wanted the 1st topic to be expanded and the rest collapsed. after searching for 2 hours i found this. i made some customizations to this code. i replaced with <div>. works great.
$('.accordion-header:first').addClass('active');
$('.accordion-list:first').addClass('content-active');
what does the ":first" mean in the above code?
robotsmeller
February 1st, 2011 at 11:26 pm
it's CSS3 – look it up. It's great for the browsers than support it but I wouldn't count on it for accessibility.
Adán
March 3rd, 2011 at 3:12 pm
Hi. Can someone say me where copy jQuery code wrote above into Magento?
konteyner
October 1st, 2011 at 10:30 am
thanks for your sharing,I use accordion menu on my website…