Interfaz simple de acordeón sencillo en Pure JS/CSS-Accordion. js

Vista prévia

Descripción

Una solución JavaScript/CSS pura para ayudarle a crear una interfaz de acordeón deslizante, vertical, configurable y suave a partir de una estructura HTML simple.

Funcionamiento

Incluya el JavaScript y la hoja de estilo del acordeón en la Página Web.

<link rel="stylesheet" href="css/accordion.css">
<script src="js/accordion.min.js"></script>

La estructura básica de HTML para el acordeón.

<div class="ac-container">

<div class="ac">


<a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>


<div class="ac-a">



<p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


</div>

</div>


<div class="ac">


<a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>


<div class="ac-a">



<p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


</div>

</div>


<div class="ac">


<a href="#" class="ac-q">Lorem ipsum dolor sit amet.</a>


<div class="ac-a">



<p>Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


</div>

</div>
</div>

Inicialice el acordeón.

var accordion = new Accordion();

Opciones y valores predeterminados.

var accordion = new Accordion({


duration: 600, // animation duration in ms {number}


itemNumber: 0, // item number which will be shown {number}


aria: true, // add ARIA elements to the HTML structure {boolean}


closeOthers: true, // show only one element at the same time {boolean}


showItem: false, // always show element that has itemNumber number {boolean}


elementClass: 'ac', // element class {string}


questionClass: 'ac-q', // question class {string}


answerClass: 'ac-a', // answer class {string}


targetClass: 'ac-target' // target class {string}
});

Activar una función al alternar un elemento.

var accordion = new Accordion({


callFunction: function callFunction() {}
 });

Registro de cambios

v2.7.1 (04/04/2019)

• Se ha corregido un error, donde el acordeón se ocultó cuando JavaScript se apagó

v2.7.0 (04/04/2019)

• Añadida la posibilidad de crear varios acordeones con las mismas opciones pasando una matriz con selectores
• Los paquetes actualizados
• Actualizado gulpfile. js
• Se ha corregido un error, donde el acordeón se ocultó cuando JavaScript se apagó
• Archivo Deleted. babelrc

02/01/2019

• v2.6.4

09/08/2018

• v2.6.0

05/27/2018

• v2.5.1