JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<p>asfasfasf</p>
<div class="slide">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<button id="btn">toggle</button>

CSS

.slide {
  height: 0;
  overflow: hidden;
  transition: height .3s;
}
ul {
  margin: 0;
}

JavaScript

var target = document.querySelector('.slide')
var height = target.scrollHeight
document.getElementById('btn').onclick = function() {
  target.style.height = target.clientHeight > 0 ? 0 : height + 'px'
}