Smooth Configurable jQuery Accordion Plugin - AddAccordion

AddAccordion is a lightweight and fast jQuery accordion plugin which comes with a smooth sliding animation using CSS3 transitions and transforms, and uses Material Icon for the indicator icons.

How to use it:

1. Add jQuery library and the jQuery AddAccordion plugin's files to your html document.

<link rel="stylesheet" href="addAccordion.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="addAccordion.js"></script>

2. Create accordion headers and content panels as follows:

<div role='header'>Section 1</div>
<div role='content'><p>Section 1 Content</p></div>
<div role='header'>Section 2</div>
<div role='content'><p>Section 2 Content</p></div>
<div role='header'>Section 3</div>
<div role='content'><p>Section 3 Content</p></div>

3. To initialize the accordion plugin automatically, just wrap the accordion content into a DIV container with the data-addui='accordion' attribute.

<div data-addui='accordion'>
  <div role='header'>Section 1</div>
  <div role='content'><p>Section 1 Content</p></div>
  <div role='header'>Section 2</div>
  <div role='content'><p>Section 2 Content</p></div>
  <div role='header'>Section 3</div>
  <div role='content'><p>Section 3 Content</p></div>
</div>

4. Change the default trigger event (click) to 'hover'.

<div data-addui='accordion' data-change="hover">
  ..
</div>

5. Set the initial accordion panel.

<div data-addui='accordion' data-change="hover" data-initial="1">
  ..
</div>

6. Specify how many accordion panels can be opened at a time.

<div data-addui='accordion' max-opened="3">
  ..
</div>

---

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