jQuery Accordion Tutorial

7
jQuery Accordion Tutorial

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.

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

LEAVE A REPLY