Lightweight Collapsible Accordion Menu Plugin - collapsible
File Size: | 8.08 KB |
---|---|
Views Total: | 4401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
collapsible is a very small jQuery plugin used to create a vertical collapsible or accordion menu that allows the visitor to open multiple (or single) menu items at the same time.
How to use it:
1. Load jQuery library and the jQuery collapsible plugin's JS & CSS files in the html document.
<link href="collapsible.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.collapsible.js"></script>
2. Create menu headers and body following the markup structure like this:
<div id="demo" class="collapse-container"> <h3> <span class="arrow-r"> </span> First Heading </h3> <div> <p>First Section</p> </div> <h3> <span class="arrow-r"> </span> Second Heading </h3> <div> <p>Second Section</p> <p>Second Section</p> </div> <h3> <span class="arrow-r"> </span> Third Heading </h3> <div> </div> </div>
3. Initialize the plugin to create a default collapsible menu.
$('#demo').collapsible();
4. Initialize the plugin to create an accodrion menu.
$('#menu').collapsible({ accordion: true });
5. Open a specified menu item on page load.
$('#menu').collapsible({ contentOpen: 0 // menu item 1 });
6. More configuration options with default values.
$('#menu').collapsible({ // animation options animate: true accordionUpSpeed: 400, accordionDownSpeed: 400, collapseSpeed: 400, // CSS classes for arrows arrowRclass: 'arrow-r', arrowDclass: 'arrow-d', });
Change log:
2017-06-01
- CSS update
This awesome jQuery plugin is developed by jordnkr. For more Advanced Usages, please check the demo page or visit the official website.