JSFiddle - React, Tailwind, and code Playground

by BigFatK

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 {
  overflow: hidden;
}
ul {
  margin: -40px 0 0;
  transition: margin .3s;
}
.slide.in ul {
  margin: 0
}

JavaScript

var target = document.querySelector('.slide')
document.getElementById('btn').onclick = function() {
  target.classList.toggle('in')	
}