High Performance Accordion Plugin With Pure JavaScript – mn-accordion

Preview:

Description:

mn-accordion is a vanilla JavaScript plugin for creating smooth accordion interfaces that use CSS animations for the performant sliding effects. Written in ES 6 and SCSS.

Features:

• Supports all HTML DOM Events.
• Configurable animation speed.
• Allows to expand one or multiple panels at a time.

How to use it:

Install the mn-accordion.

# NPM
$ npm install mn-accordion --save

# Bower
$ bower install mn-accordion --save

Import the mn-accordion into your app.

import MNAccordion from 'mn-accordion';
import './dist/css/mn-accordion.css';

The HTML structure for the accordion interface.

<div class="mn-accordion" id="accordion">

  <!--Accordion item-->
  <div class="accordion-item">
      <div class="accordion-heading">
          <h3>Section 1</h3>
          <div class="icon">
              <i class="arrow right"></i>
          </div>
      </div>
      <div class="accordion-content">
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
  </div>
  <!--Accordion item-->

  <!--Accordion item-->
  <div class="accordion-item">
      <div class="accordion-heading">
          <h3>Section 2</h3>
          <div class="icon">
              <i class="arrow right"></i>
          </div>
      </div>
      <div class="accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
  </div>
  <!--Accordion item-->

  <!--Accordion item-->
  <div class="accordion-item">
      <div class="accordion-heading">
          <h3>Section 3</h3>
          <div class="icon">
              <i class="arrow right"></i>
          </div>
      </div>
      <div class="accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
  </div>
  <!--Accordion item-->

</div>

Initialize the accordion with default options.

var myAccordion = new Accordion(document.getElementById("accordion"), {
    // options here
});

Possible customization options.

var myAccordion = new Accordion(document.getElementById("accordion"), {

    // supports all HTML DOM Events (e.g. click, dblclick, mouseover etc.)
    eventName: "click", 

    // enable event delay untill given milliseconds, usefull if eventName is mouseover
    eventDelay: 0, 

    // enable all accordion item can be closed at once
    collapsible: true, 

    // enable multiple accordion item open at once
    multiple: false, 

    // -1 for close all as default, array of indexes accepted if multiple option is true
    defaultOpenedIndexes: 0, 

    //slide functions with jQuery. If you don't include jQuery in your website please override these functions
    slideDuration: 200,
    
});