Step by step install the plugin.
npm install accordionjs --save
or
yarn add accordionjs
or
Download the most recent version from Github and include the unzipped files in your project. Use the top link on this page.
Step by step create the first accordion instance.
jQuery: Make sure that jQuery library is installed. If it is not that add the following line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
CSS: Next include the CSS in document <head>:
<link rel="stylesheet" href="accordion.css" />
JS: And the JS just before the closing </body> tag:
<script src="accordion.min.js"></script>
Init: After this line add the following code to create the first instance:
<script>
jQuery(document).ready(function($){
$("#my-accordion").accordionjs();
});
</script>
HTML: In this example we used #my-accordion as the ID for our new accordion(css class selectors works as well). That said we must add the HTML:
<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>
The plugin contains a few options that can be defined directly in plugin call or using data-* attributes:
<script>
$("#my-accordion").accordionjs({
// Allow self close.(data-close-able)
closeAble : false,
// Close other sections.(data-close-other)
closeOther : true,
// Animation Speed.(data-slide-speed)
slideSpeed : 150,
// The section open on first init. A number from 1 to X or false.(data-active-index)
activeIndex : 1,
// Callback when a section is open
openSection: function( section ){},
// Callback before a section is open
beforeOpenSection: function( section ){},
});
</script>
A few examples that demonstrates the plugin's power.
This is the default example with default settings.
The second section is open by default when activeIndex is set to 2.
This example has no active section. When activeIndex is false, closeAble is automatically set to true.
activeIndex may be an array of integers. For example if you pass [2, 4], section 2 and 4 will be open by default.
When the accordion contains only one section it will be open by default and closeAble set to true
To make it closed by default, set activeIndex to false
Set closeOther to false, so when a section is opened other section are not closed. This automatically set closeAble to true