Vanilla JS: slideToggle ()

Uno de los efectos que más usé de jQuery fue la función slideToggle (). A continuación, creé ese efecto deslizante en Vanilla JS reutilizable para elementos múltiples en la misma página.

He utilizado la clase " js-toggle " para asignar el elemento que es responsable de la acción de abrir / ocultar, junto con un atributo " data-container " para asignar El "id" del contenedor deslizante.

Ejemplo:

  Mostrar alternar 2 
Etc ...

Y para el elemento contenedor de la diapositiva usé la clase " toggle-container " y el atributo "id" con el nombre que desee.

Ejemplo:

  .toggle-container {
transición: altura 0.35s facilidad de entrada;
desbordamiento: oculto;
}
.toggle-container: no (.active) {
pantalla: ninguna;
}

Y el código js:

  var linkToggle = document.querySelectorAll (& # 39 ;. Js-toggle & # 39;);

para (i = 0; i <linkToggle.length; i ++) {
linkToggle [i] .addEventListener (& # 39; click & # 39 ;, function (event) {
event.preventDefault ();
var container = document.getElementById (this.dataset.container);
si (! container.classList.contains (& # 39; active & # 39;)) {
container.classList.add (& # 39; active & # 39;);
container.style.height = & # 39; auto & # 39 ;;
var height = container.clientHeight + & # 39; px & # 39 ;;
container.style.height = & # 39; 0px & # 39 ;;
setTimeout (function () {
container.style.height = altura;
}, 0);
} else {
container.style.height = & # 39; 0px & # 39 ;;
container.addEventListener (& # 39; transitionend & # 39 ;, function () {
container.classList.remove (& # 39; active & # 39;);
}, {
una vez: cierto
});
}
});
}

Demo:

(*) Hay una forma aún más fácil de hacerlo utilizando básicamente CSS con min-height, pero el rendimiento en JS es algo mejor.

---

READ MORE – CLICK HERE

www.Down.co.ve

---