JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<h3>Testing</h3>
<a href="/" class="trigger">trigger</a>
<div class="expander">
  <div class="expander__inner">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quo facilis cumque ex impedit nobis delectus sint possimus dolorem, porro quia dolores, repellat eos quidem, ullam maiores! Excepturi, nulla, quis.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quo facilis cumque ex impedit nobis delectus sint possimus dolorem, porro quia dolores, repellat eos quidem, ullam maiores! Excepturi, nulla, quis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quo facilis cumque ex impedit nobis delectus sint possimus dolorem, porro quia dolores, repellat eos quidem, ullam maiores! Excepturi, nulla, quis.</p>
  </div>
</div>

SCSS

.trigger {
  
}
.expander {
  height: 0;
  overflow: hidden;
  transition: 0.3s ease all;
  
 
}

JavaScript

var expander = document.querySelector('.expander');

var expanderInner = document.querySelector('.expander__inner');

console.log(expanderInner.clientHeight);

var trigger = document.querySelector('.trigger');

trigger.addEventListener('click', function(e){


console.log(expander.clientHeight);
if (expander.clientHeight === 0) {
expander.style.height = expanderInner.clientHeight + 'px';
} else {
expander.style.height = '0';
}


e.preventDefault();
})