Acordeón liso moderno en JavaScript puro-acordeón-init
| Autor: | denizhacisalihoglu |
|---|---|
| Views Total: | 967 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 22, 2018 |
| Licencia: |
Vista prévia
Descripción
Solo otra solución de JavaScript PURE para crear un componente de acordeón moderno y suave para tu sistema de preguntas frecuentes.
Funcionamiento
Inserte la hoja de estilos Accordion. min. CSS y JavaScript Accordion. min. js en el archivo HTML.
<link href="dist/css/accordion.min.css" rel="stylesheet"> <script src="dist/js/accordion.min.js"></script>
Agregue encabezados de acordeón (preguntas) y contenido (respuestas) a la interfaz de usuario del acordeón.
<div class="accordion-container"> <div class="panel"> <div class="heading">1. Definition</div> <div class="content"> Content 1 </div> </div> <div class="panel"> <div class="heading">2. Definition</div> <div class="content"> Content 2 </div> </div> <div class="panel"> <div class="heading">3. Definition</div> <div class="content"> Content 3 </div> </div> </div>
Inicializar el componente de acordeón y listo.
var myAccordion = new Accordion('.accordion-container'); Posibles ajustes de acordeón.
var accordion = new Accordion('.accordion-container',{
// hides all answers
hideAll: false,
// shows all answers
showAll: false,
// shows the first answer
showFirst: false,
// panel ID you want to show at first time
panelId: null
});
