Accordion.JS is lightweight, easily configurable and multilevel supported responsive accordion plugin. The plugin is automatically adjustable on mobile devices no extra coding is required for mobile devices. It will work perfectly on all mobile devices and browsers. It can be configured directly using options and HTML5 data-* attributes.
npm install accordionjs --saveyarn add accordionjs1. Include the Javascript accordion.min.js at the bottom of the web page.
<script src="path/to/accordion.min.js"></script>2. Include the CSS accordion.css in the header of the page.
<link rel="stylesheet" href="path/to/accordion.css">3. Add the basic HTML to the page.
<ul id="my-accordion" class="accordionjs">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>4. Initialize the plugin and we're ready to go.
jQuery(document).ready(function($){
$("#my-accordion").accordionjs();
});| Name | Default | Description |
|---|---|---|
| closeAble | false |
Allow self close.(data-close-able) |
| closeOther | true |
Close other sections.(data-close-other) |
| slideSpeed | 150 |
Animation Speed.(data-slide-speed) |
| activeIndex | 1 |
The section open on first init. A number from 1 to X or false.(data-active-index) |
| openSection | function( section ){} |
Callback when a section is open |
| beforeOpenSection | function( section ){} |
Callback before a section is open |
$("#my-accordion").accordionjs({
closeAble : false,
closeOther : true,
slideSpeed : 150,
activeIndex : 1,
openSection: function( section ){},
beforeOpenSection: function( section ){},
});<ul class="demo-accordion accordionjs">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>jQuery(document).ready(function($){
$(".demo-accordion").accordionjs();
});<ul class="demo-accordion accordionjs" data-active-index="2">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>jQuery(document).ready(function($){
$(".demo-accordion").accordionjs();
});<ul class="demo-accordion accordionjs" data-active-index="false">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>jQuery(document).ready(function($){
$(".demo-accordion").accordionjs();
});<ul class="demo-accordion accordionjs">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<ul class="demo-accordion accordionjs">
<li>
<div>Nested Section 1</div>
<div>
<!-- Nested content here. -->
</div>
</li>
<li>
<div>Nested Section 2</div>
<div>
<!-- Nested content here. -->
</div>
</li>
<li>
<div>Nested Section 3</div>
<div>
<!-- Nested content here. -->
</div>
</li>
</ul>
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>jQuery(document).ready(function($){
$(".demo-accordion").accordionjs();
});<ul class="demo-accordion accordionjs" data-active-index="[1, 3]">
<!-- Section 1 -->
<li>
<div>Section 1 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 2 -->
<li>
<div>Section 2 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
<!-- Section 3 -->
<li>
<div>Section 3 title</div>
<div>
<!-- Section content here. -->
</div>
</li>
</ul>jQuery(document).ready(function($){
$(".demo-accordion").accordionjs();
});