This time I will share jQuery Plugin and tutorial about Lightweight Collapsible Accordion Menu Plugin – collapsible, hope it will help you in programming stack.
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.
1 |
<link href="collapsible.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="jquery.collapsible.js"></script> |
2. Create menu headers and body following the markup structure like this:
01 |
<div id="demo" class="collapse-container"> |
03 |
<span class="arrow-r"> |
11 |
<span class="arrow-r"> |
20 |
<span class="arrow-r"> |
3. Initialize the plugin to create a default collapsible menu.
1 |
$('#demo').collapsible(); |
4. Initialize the plugin to create an accodrion menu.
1 |
$('#menu').collapsible({ |
5. Open a specified menu item on page load.
1 |
$('#menu').collapsible({ |
6. More configuration options with default values.
01 |
$('#menu').collapsible({ |
05 |
accordionUpSpeed: 400, |
06 |
accordionDownSpeed: 400, |
10 |
arrowRclass: 'arrow-r', |
11 |
arrowDclass: 'arrow-d', |
Change log:
2017-06-01
This awesome jQuery plugin is developed by jordnkr. For more Advanced Usages, please check the demo page or visit the official website.
