JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<div class="collapse">
  <button id="button" class="button collapse__button">toggle</button>
  <div class="children collapse__children">
      <div class="children__item">Lorem ipsum dolor.</div>
      <div class="children__item">Deserunt, qui, eaque.</div>
      <div class="children__item">Beatae, eligendi facilis.</div>
      <div class="children__item">A, qui quisquam.</div>
  </div>
</div>

CSS

.collapse {
  display: inline-block;
}

.collapse .children {
  transition: .5s;
  transform: scaleY(0);
  transform-origin: top center;
  background-color: #fec;
}

.collapse_open .children {
  transform: scaleY(1);
}

JavaScript

function toggle(){
	document.querySelector('.collapse').classList.toggle('collapse_open');
}

button.onclick = toggle;
setInterval(toggle, 5000)