JSFiddle - React, Tailwind, and code Playground

by baacke

HTML

<ul id="foo">
   <li>
      <h2>Click Me 1</h2>
      <div class="bar">
          Content To Toggle
       </div>
   </li>
   <li>
      <h2>Click Me 2</h2>
      <div class="bar">
          <br><br><br>
          This one is different height!
       </div>
   </li>
</ul>

CSS

#foo>li>div.bar {transition: all 0.5s;
   overflow: hidden;}

/* Style for Demonstration Only */
#foo {padding: 0}
#foo>li {list-style-type: none;
   background-color: #4679bd;
   margin: 0 0 4px;
   padding: 5px;
   color: #fff}
#foo>li>h2 {cursor: pointer;
   margin: 10px}
#foo>li>div.bar {text-align: center;
   background-color: #fff;
   color: #222;
   line-height: 30px}

JavaScript

$('#foo h2').each(function(){
   var bar = $(this).siblings('.bar');
   bar.attr('data-height', bar.height()); //figure out the height first
   bar.css('max-height', '0px'); //then close vertically
});
$('#foo h2').click(function(){
   var bar = $(this).siblings('.bar');
   if ( bar .css('max-height') == '0px' ){ //if closed (then open)
      bar.css('max-height', bar.data('height') + 'px');
   } else { //must be open (so close)
      bar.css('max-height', '0px');
   }
});