Simple Accordion Plugin For jQuery and Bootstrap

File Size: 5.6 KB
Views Total: 15569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 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 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

3. Call the plugin on the parent container.


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.