Crear acordeón anidado & alternar IU de contenido con JavaScript-Handy-Collapse. js

Vista prévia

Descripción

Handy-Collapse. js es un pequeño plugin de JavaScript de vainilla que se utiliza para crear acordeón anidado y/o interfaces de alternancia de contenido con suaves deslizando los efectos de arriba/abajo.

Funcionamiento

Descargue e importe el script Handy-Collapse. js en el HTML.

<script src="/dist/handy-collapse.js"></script>

Crea botones de alternancia y contenido togglable en la Página Web.

<button type="button" data-nested-control="content-example">

Toggle Content
</button>

<div data-nested-content="content-example">

<div class="box">


Content Here


<button type="button" data-nested-control="child-example">



Toggle Child Content


</button>


<div data-nested-content="child-example">



<div class="box">




<p>





Child Content Here




</p>



</div>


</div>

</div>
</div>

Inicialice Handy-collaps. js y done. Esto sólo abrirá un panel a la vez

let nested = new HandyCollapse({


nameSpace: "nested"
});

Para crear una interfaz de alternancia de contenido (abrir varios paneles a la vez), simplemente establezca ' closeOthers ' en ' false '.

let nested = new HandyCollapse({


nameSpace: "nested",


closeOthers: false
});

Más opciones de configuración con valores predeterminados.

let nested = new HandyCollapse({


nameSpace: "hc",


toggleButtonAttr: `data-${options.nameSpace || "hc"}-control`,


toggleContentAttr: `data-${options.nameSpace || "hc"}-content`,


activeClass: "is-active",


isAimation: true,


animatinSpeed: 400,


cssEasing: "ease-in-out"
});

Funciones de devolución de llamada que se dispararán después de que comience/finalice la animación de diapositivas.

let nested = new HandyCollapse({


onSlideStart: () => false,


onSlideEnd: () => false
});

Registro de cambios

v0.1.4 (01/07/2019)

• Actualizado

v0.1.2 (11/14/2018)

• Corregir error tipográfico en opciones
• Corrija las muestras

v0.1.1 (10/11/2018)

• Bugfix

v0.1.0 (10/09/2018)

• Eliminar estilo ' desbordamiento: oculto ' en abierto, permitir varios botones