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:

Top Searches

Top Products

Top Colors

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.

Categories: jQueryWeb

7 thoughts on “jQuery Accordion Tutorial”

Master · May 23, 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 27, 2010 at 3:37 am

where is the CSS.

Kelly · December 15, 2010 at 12:12 pm

yeah – no CSS?

commenter · January 27, 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 1, 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 3, 2011 at 3:12 pm

Hi. Can someone say me where copy jQuery code wrote above into Magento?

konteyner · October 1, 2011 at 10:30 am

thanks for your sharing,I use accordion menu on my website…

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…