JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<button type="button">button</button>
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus illo magnam quidem molestias saepe veritatis aspernatur odit repudiandae itaque. Obcaecati.
</div>

CSS

button {
  
}
.box {
  overflow: hidden;
  display: none;
  /* opacity: 0; */
  height: 0;
  transition-property: display, height;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
}
.active {
  display: block;
  /* opacity: 1; */
  height: auto;
}

JavaScript

const btnEl = document.querySelector('button')
const box = document.querySelector('.box')
btnEl.addEventListener('click', function(e) {
	box.classList.toggle('active')
	console.log('ddd')
})