High Performance Pure Javascript Accordion Plugin

mn-accordion

Today we are going to share  MN accordion plugin 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, });

The post High Performance Accordion Plugin With Pure JavaScript – mn-accordion appeared first on CSS Script.

 

Leave a Reply

Your email address will not be published. Required fields are marked *