Complemento de alternancia de contenido suave en JavaScript puro-collapsible. js

Vista prévia

Descripción

collapsible. js es un complemento de JavaScript de alternancia de contenido libre de dependencias para colapsar suavemente & expandir paneles de contenido al igual que Accordion.

Funcionamiento

Para empezar, inserte el script collapsible. js en el documento.

<script src="collapsible.js"></script>

Cree paneles de contenido contraíbles y expansibles con el atributo ' Data-plegable ':

<div class="block" data-collapsible>

<div class="block__title"><h3>Panel 1</h3></div>

<div class="block__content">


<p>Content 1</p>

</div>
</div>

<div class="block" data-collapsible>

<div class="block__title"><h3>Panel 2</h3></div>

<div class="block__content">


<p>Content 2</p>

</div>
</div>

<div class="block" data-collapsible>

<div class="block__title"><h3>Panel 3</h3></div>

<div class="block__content">


<p>Content 3</p>

</div>
</div>

Active el contraíble. js.

• nodo : Los elementos HTML que se manipulará.
• eventNode: El elemento HTML en el que se adjuntará eventListener.

new Collapsible({


node: document.querySelectorAll('.block'),


eventNode: '.block__title'
});

Asigne el estado del elemento de nodo.

new Collapsible({


node: document.querySelectorAll('.block'),


eventNode: '.block__title',


isCollapsed: false
});

Asigne un MutationObserver para observar los cambios de DOM secundarios.

new Collapsible({


node: document.querySelectorAll('.block'),


eventNode: '.block__title',


observe: true
});

Funciones de devolución de llamada disponibles.

new Collapsible({


node: document.querySelectorAll('.block'),


eventNode: '.block__title',


expandCallback: function(){},


collapseCallback function(){},


observeCallback function(){}
});