Vanilla JS: slideToggle()

Uno de los efectos que más use de jQuery fue la función de slideToggle(). A continuación he creado ese efecto de deslizamiento en Vanilla JS, re-utilizable para múltiples elementos en la misma página.

He utilizado 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 {
  transition: height 0.35s ease-in-out;
  overflow: hidden;
}
.toggle-container:not(.active) {
  display: none;
}

Y el código js:

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

for(i = 0; i < linkToggle.length; i++){
  linkToggle[i].addEventListener('click', function(event){
    event.preventDefault();
    var container = document.getElementById(this.dataset.container);
    if (!container.classList.contains('active')) {
      container.classList.add('active');
      container.style.height = 'auto';
      var height = container.clientHeight + 'px';
      container.style.height = '0px';
      setTimeout(function () {
        container.style.height = height;
      }, 0);
    } else {
      container.style.height = '0px';
      container.addEventListener('transitionend', function () {
        container.classList.remove('active');
      }, {
        once: true
      });
    }
  });
}

Demo:

(*) Existe una forma aún más sencilla de hacerlo usando básicamente CSS con min-height pero el rendimiento en JS es algo mejor.