Press "Enter" to skip to content

An Accordion Plugin With Support of ES6 and SCSS

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

ionic accordion example, accordion group is not a known element, ionic accordion list, accordion bootstrap, nested accordion javascript

How to make use of it:

1. Install mn-accordion.

# NPM
$ npm install mn-accordion --save

# Bower
$ bower install mn-accordion --save

2. Import mn-accordion into your app.

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

3. The HTML structure of 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>

4. Configure the accordion with the default options.

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

5. 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,
    
});

high performance accordion library, MN Accordion Plugin/Github


See Demo And Download

Official Website(maykinayki): Click Here

This superior jQuery/javascript plugin is developed by maykinayki. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.