Lightweight jQuery Accordion Plugin With Smooth Animations - Woco Accordion
File Size: | 40.2 KB |
---|---|
Views Total: | 8128 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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: "▼", });
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.