Complemento de alternancia de contenido versátil con JavaScript puro-Toggler. js

Vista prévia

Descripción

Toggler. js es un complemento multifuncional de JavaScript utilizado para mostrar y ocultar elementos de bloques específicos con animaciones de diapositivas o de fundido.

Características

• Fácil de implementar utilizando datos atributos y clases CSS.
• Permite alternar varios elementos a la vez. Ideal para acordeones.
• Permite mostrar un elemento específico en init.

¿Cómo funciona?

Importe el Toggler. CSS y Toggler. js en el archivo HTML.

<link rel="stylesheet" href="css/toggler.css">
<script src="js/toggler.js"></script>

Inicializar el plugin Toggler y estamos listos para ir.

Toggler.Init({


// options here
});

Habilite un botón de alternancia para mostrar/ocultar su elemento al hacer clic.

<a id="test-button">Test</a>
<div id="test-content">

content here
</div>

var content = document.getElementById('test-content');
var button = document.getElementById('test-button');

var toggler = new Toggler(content);
toggler.show();

button.addEventListener('click', function (_) {

return toggler.toggle();
});

También puede implementar el complemento Toggler a través de datos atributos:

<a data-toggler="toggle" href="#demo">Toggle</a>
<a data-toggler="show" href="#demo">Show</a>
<a data-toggler="hide" href="#demo">Hide</a>

<div class="js-toggler" id="demo">

content here
</div>

Habilite un elemento de alternancia para mostrar u ocultar varios elementos.

<a data-toggler="toggle" data-toggler-target="#1, #demo2" href="#">Toggle</a>

<div class="js-toggler" id="1">

content here
</div>
<div class="js-toggler" id="2">

content here
</div>

Crea un acordeón con este plugin.

<a href="#" data-toggler="toggle" data-toggler-target="#1" data-toggler-collection="#accordion">Accordion 1</a>

<div class="js-toggler is-visible" id="1">

content here
</div>

<a href="#" data-toggler="toggle" data-toggler-target="#2" data-toggler-collection="#accordion">Accordion 2</a>

<div class="js-toggler" id="2">

content here
</div>

...

Crea una interfaz de pestañas con este plugin.

<a href="#1" data-toggler="tabs" data-toggler-collection="#tabs">Tab 1</a>
<a href="#2" data-toggler="tabs" data-toggler-collection="#tabs">Tab 2</a>

<div class="js-toggler is-visible" id="1">

content here
</div>

<div class="js-toggler" id="2">

content here
</div>

Todas las opciones predeterminadas.

Toggler.Init({


CLASS_BASE: 'js-toggler',


CLASS_VISIBLE: 'is-visible',


CLASS_TARGET_VISIBLE: 'is-target-visible',


CLASS_TRANSITIONING: 'is-transitioning',


CLASS_FADE: 'is-fade',


CLASS_SLIDEFADE: 'is-slidefade',


DELEGATE_CLICK: false

});