Smooth Configurable jQuery Accordion Plugin - AddAccordion
File Size: | 20.9 KB |
---|---|
Views Total: | 3436 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.