Beautiful & Lightweight jQuery Content Accordion Plugin

Accordion is a lightweight, flexible and customizable jQuery plugin that allows to expand and collapse html content in a cool accordion interface.

How to use it:

1. Include required accordion.css in the head section of your page.

<link href="css/accordion.css" rel="stylesheet" type="text/css" />

2. Create the html for the accordion as follows.

<dl class="accordion">
<dt>Tab 1</dt>
<dd>
Content 1
</dd>
<dt>Tab 2</dt>
<dd>
Content 2
</dd>

<dt>...</dt>
<dd>
...
</dd>

</dl>

3. Include the jQuery library and jQuery Accordion plugin on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/accordion.min.js"></script>

4. Call the plugin with options.

<script type="text/javascript">
$(function () {
$('.accordion').accordion({
open: false, // First List Open, Default Value: false
autoStart: false, // Auto Start, Default Value: false
onHoverActive: false, // On Hover Active, Default Value: false
slideInterval: 3000, // Expression at specified intervals (in milliseconds) Default Value: 3000
duration: 'slow', // The default duration is slow. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
easing: 'swing', //  An easing function specifies the speed at which the animation progresses at different points within the animation.
complete: function () { console.log('Complete Event'); } //If supplied, the complete callback function is fired once the accordion is complete.
});
});
</script>

---

This awesome jQuery plugin is developed by bhaumikpatel. For more Advanced Usages, please check the demo page or visit the official website.