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:
<div id="accordion">
<div class="accordion-header active">
<h3>Top Searches</h3>
</div>
<ul class="accordion-list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div class="accordion-header">
<h3>Top Products</h3>
</div>
<ul class="accordion-list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div class="accordion-header">
<h3>Top Colors</h3>
</div>
<ul class="accordion-list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>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.
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…