Acordeón de respuesta básica en Vanilla JavaScript-Accordionjs
| Autor: | simondavies |
|---|---|
| Views Total: | 2,911 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 25, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Una sencilla y ligera biblioteca de JavaScript Vanilla para crear una interfaz de acordeón adaptable en la que los usuarios puedan expandir o contraer el contenido haciendo clic en los encabezados del panel asociados.
Funcionamiento
Cargue la versión minimizada del JS de Accordionjs & archivos CSS en su documento.
<link rel="stylesheet" href="accordionjs.min.css"> <script src="accordionjs.min.js" defer></script>
Cree los paneles de acordeón & encabezados de la siguiente manera:
<div id="the-accordion" class="accordion-wrapper"> <div class="accordion-panel"> <div class="accordion-title"><a href="#">Question A</a> </div> <div class="accordion-content"> <p>Answer A</p> </div> </div> <div class="accordion-panel"> <div class="accordion-title"><a href="#">Question B</a> </div> <div class="accordion-content"> <p>Answer B</p> </div> </div> <div class="accordion-panel"> <div class="accordion-title"><a href="#">Question C</a> </div> <div class="accordion-content"> <p>Answer C</p> </div> </div> </div>
Crear una nueva instancia de acordeón y listo.
new AccordionJS();
Asigne un valor de ID diferente a la función ' AccordionJS () ', para que pueda ejecutar dos o más acordeones en una página.
new AccordionJS('the-accordion-two');
