Lightweight and Easy Configurable Multilevel Accordion – Accordion.JS

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.

Features:

• Multilevel supported.
• Lightweight and easy to implement.
• Supports data-* attributes to configure various options.
• Supports on devices and browsers.
• Fully responsive, no need to do anything for responsiveness.

Install with npm

npm install accordionjs --save

Install with yarn

yarn add accordionjs

How to use it:

1. 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();
});

Plugin’s default options:

$("#my-accordion").accordionjs({
    closeAble   : false,
    closeOther  : true,
    slideSpeed  : 150,
    activeIndex : 1,
    openSection: function( section ){},
    beforeOpenSection: function( section ){},
});