Simple Accordion Plugin For jQuery and Bootstrap

A lightweight jQuery accordion plugin that uses Bootstrap styles to create a responsive, nice-looking accordion control with custom slideUp & slideDown animations.

How to use it:

1. Load Bootstrap's stylesheet for basic accordion styles (Optional).

<link rel="stylesheet" href="bootstrap.min.css">

2. Load jQuery library and the jQuery accordion plugin in your web page.

<script src="jquery-1.11.2.js"></script>
<script src="jquery.accordion.js"></script>

3. Create a multi-panel accordion using Bootstrap panel component.

<div class="demo">
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="demo1">Demo1</div>
    <div class="panel-body acc-open" data-acc-content="demo1">
      Panel Body 1
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="demo2">Demo2</div>
    <div class="panel-body" data-acc-content="demo2">
      Panel Body 2
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="demo3">Demo3</div>
    <div class="panel-body" data-acc-content="demo3">
      Panel Body 3
    </div>
  </div>
</div>

3. Call the plugin on the parent container.

$('.demo').accordion();

4. By default, the plugin allows the visitor to expand multiple accordion panels at the same time. You can set the multiOpen option to false to automatically collapse other panels when a selected panel is opened.

$('.demo').accordion({ multiOpen: false });

5. Change the animation speed.

$('.demo').accordion({ duration: 200 });

---

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