Acordeón básico & contenido alternar JS Library-Houdini

Vista prévia

Descripción

Houdini es un plugin de JavaScript Vanilla permite alternar la visibilidad del contenido del bloque con el soporte de hashtag URL (Deep Link).

Funcionamiento

Importa los archivos de Houdini (JavaScript y StyleSheet) en la página.

<!-- stylesheets -->
<link rel="stylesheet" href="dist/css/houdini.css">
<!-- Javascript -->
<script src="dist/js/houdini.js"></script>

Inicializa la biblioteca Houdini y estamos listos para irnos.

houdini.init();

Crear un widget de alternancia de contenido básico.

<a class="collapse-toggle" data-collapse href="#show-me">

<span class="collapse-text-show">Show +</span>

<span class="collapse-text-hide">Hide -</span>
</a>

<div class="collapse" id="show-me">

Target content
</div>

Cree un widget de acordeón básico que admita varios bloques de contenido y que solo un bloque esté visible a la vez.

<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section1">

Section 1

<span class="collapse-text-show">+</span>

<span class="collapse-text-hide">-</span>
</a>

<div class="collapse active" id="section1">

Section 1 Content
</div>

<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section2">

Section 2

<span class="collapse-text-show">+</span>

<span class="collapse-text-hide">-</span>
</a>

<div class="collapse active" id="section2">

Section 2 Content
</div>

<a class="collapse-toggle active" data-collapse data-group="accordion" href="#section3">

Section 3

<span class="collapse-text-show">+</span>

<span class="collapse-text-hide">-</span>
</a>

<div class="collapse active" id="section3">

Section 3 Content
</div>

...

Configuración predeterminada.

houdini.init({

selectorToggle: '[data-collapse]',

selectorContent: '.collapse',

toggleActiveClass: 'active',

contentActiveClass: 'active',

initClass: 'js-houdini',

stopVideo: true
});

Funciones de devolución de llamada que se desencadenarán cuando el contenido se muestre u oculte.

houdini.init({

callbackOpen: function () {},

callbackClose: function () {}
});