GSAP: slideToggle ()

A continuación, creé el efecto deslizante de desplazamiento deslizante de jQuery utilizando Vanilla JS + GSAP reutilizable para elementos múltiples en la misma página. [19659002] He usado los mismos nombres de clase que en la publicación de Vanilla JS: slideToggle () : la clase " js-toggle " para asignar el elemento responsable de la acción para abrir / ocultar, junto con un atributo " data-container " para asignar el "id" del contenedor de diapositivas.

Ejemplo:

  Mostrar conmutador 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 {
altura: 0;
desbordamiento: oculto;
}
.toggle-container.open {
altura: auto;
}

Y el código js con la animación GSAP:

var linkToggle = document.querySelectorAll (& # 039; .js-toggle & # 039;);

para (i = 0; i <linkToggle.length; i ++) {

linkToggle [i] .addEventListener (& # 039; haga clic en & # 039;, function () {

var container = document.getElementById (this.dataset.container);
var enlace = esto;

if (link.classList.contains (& # 039; active & # 039;)) {
link.classList.remove (& # 039; active & # 039;);
TweenLite.to (contenedor, 0.4, {altura: 0})
} else {
link.classList.add (& # 039; active & # 039;);
TweenLite.set (contenedor, {altura: "auto"})
TweenLite.from (contenedor, 0.4, {altura: 0})
}

});

}

Demostración:

---

READ MORE – CLICK HERE

www.Down.co.ve

---