GSAP: slideToggle()

A continuación he creado el efecto de deslizamiento slideToggle de jQuery usando Vanilla JS + GSAP, re-utilizable para múltiples elementos en la misma página.

He utilizado los mismos nombres de clases que en el post de Vanilla JS: slideToggle(): la clase «js-toggle» para asignar al elemento que se encargue de la acción de abrir/ocultar, junto con un atributo «data-container» para asignar el «id» del contenedor del slide.

Ejemplo:

<button class="js-toggle" data-container="toggle-1">Mostrar toggle 1</button>
<span class="js-toggle" data-container="toggle-2">Mostrar toggle 2</span>
Etc...

Y para el elemento contenedor del slide he usado la clase «toggle-container» y el atributo «id» con el nombre que quieras.

Ejemplo:

<div class="toggle-container" id="toggle-1">
  <!-- tu contenido -->
</div>

<div class="toggle-container" id="toggle-2">
  <!-- tu contenido -->
</div>

.toggle-container{
  height: 0;
  overflow:hidden;
}
.toggle-container.open{
  height: auto;
}

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

var linkToggle = document.querySelectorAll('.js-toggle');

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

  linkToggle[i].addEventListener('click', function(){

    var container = document.getElementById(this.dataset.container);
    var link = this;

    if (link.classList.contains('active')) {
      link.classList.remove('active');
      TweenLite.to(container, 0.4, { height:0 })
    } else {
      link.classList.add('active');
      TweenLite.set(container, { height: "auto" })
      TweenLite.from(container, 0.4, { height: 0 })
    }
    
  });

}

Demo: