Plugin de acordeón de alto rendimiento con JavaScript puro-MN-acordeón

Vista prévia

Descripción

MN-Accordion es un plugin de JavaScript vainilla para crear interfaces de acordeón lisas que utilizan animaciones CSS para los efectos deslizantes eficaz. Escrito en ES 6 y SCSS.

Características

• Admite todos los eventos DOM de HTML.
• Velocidad de animación configurable.
• Permite expandir uno o varios paneles a la vez.

Funcionamiento

Instale el acordeón MN.

# NPM
$ npm install mn-accordion --save

# Bower
$ bower install mn-accordion --save

Importa el acordeón de Mn en tu aplicación.

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

La estructura HTML para la interfaz de acordeón.

<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>

Inicializa el acordeón con las opciones predeterminadas.

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


// options here
});

Posibles opciones de personalización.

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,



});