Lightweight jQuery Accordion Plugin With Smooth Animations - Woco Accordion

A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.

How to use it:

1. Include the jQuery Woco Accordion plugin's CSS in the header.

<link href="woco-accordion.min.css" rel="stylesheet">

2. Include the jQuery Woco Accordion plugin's JavaScript after you have loaded jQuery library.

<script src="jquery-1.11.3.min.js"></script>
<script src="woco.accordion.min.js"></script>

3. Create a DIV element which contains pairs of H1 element and DIV element.

<div class="accordion">
  <h1>Section 1</h1>
  <div> Content 1<br>
    Content 1<br>
    Content 1<br>
    Content 1<br>
  </div>
  <h1>Section 2</h1>
  <div> Content 2<br>
    Content 2<br>
    Content 2<br>
    Content 2<br>
  </div>
  <h1>Section 3</h1>
  <div> Content 3<br>
    Content 3<br>
    Content 3<br>
    Content 3<br>
  </div>
</div>

4. Initialize the accordion plugin.

$(".accordion").accordion();

5. OR Initialize the plugin with options.

$(".accordion").accordion({

  //whether expanding mulitple section is allowed or not
  multiExpand: false,

  //slide animation speed
  slideSpeed: 500,

  //drop down icon
  dropDownIcon: "&#9660",

});

Change log:

v3.2 (2016-09-18)

• update.

---

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