JSFiddle - React, Tailwind, and code Playground

by TheScenery

HTML

<div class='list-header' onclick='toggle()'>
Click me!
</div>
<div class='list-body'>
  <p>
  balabalabla
  </p>
  <p>
  balabalabla
  </p>
  <p>
  balabalabla
  </p>
  <p>
  balabalabla
  </p>
  <p>
  balabalabla
  </p>
  <p>
  balabalabla
  </p>
</div>

CSS

.list-header {
  cursor: pointer;
  user-select: none;
}

.list-body {
  transition: max-height 1s;
  max-height: 0;
  overflow-y: hidden;
}

.list-body.expand {
  max-height: 1000px;
}

JavaScript

window.toggle = function() {
	var el = document.querySelector('.list-body.expand');
  if (el) {
  	el.className = 'list-body';
  } else {
  	el = document.querySelector('.list-body');
    el.className = 'list-body expand'
  }
}