JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<ul class="collapsible popout">
<li class="list">
    <div class="accordion">Section 1</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</li>
<li class="list">
    <div class="accordion">Section 2</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</li>
<li class="list">
    <div class="accordion">Section 3</div>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</li>
</ul>

JavaScript

var list = document.getElementsByClassName("list");
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
 this.classList.toggle("active");
 this.parentNode.classList.toggle("active");
 var panel = this.nextElementSibling;
 if (panel.style.maxHeight){
  panel.style.maxHeight = null;
 } else {
  panel.style.maxHeight = panel.scrollHeight + "px";
} 
});
}