Beautiful & Lightweight jQuery Content Accordion Plugin

File Size: 9.36KB
Views Total: 3771
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
Content 1
<dt>Tab 2</dt>
Content 2



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

<script src=""></script>
<script type="text/javascript" src="js/accordion.min.js"></script>

4. Call the plugin with options.

<script type="text/javascript">
$(function () {
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.

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