JSFiddle - React, Tailwind, and code Playground

HTML

<button class="trigger">expand</button>
<div class="expandible">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.expandible {
    width: 100%;
    overflow: hidden;
    border: 1px solid grey;
    height: 40px;
    -webkit-transition: height 0.4s;
}

.expandible.expanded {
  
}

.expandible .item {
    width: 30px;
    height: 30px;
    background-color: #00c;
    margin: 5px;
    display: inline-block;
}

JavaScript

$('.trigger').click(function() {

    var expandible = $('.expandible')[0];
    console.log("------------------------------");
    console.log('clientHeight: ' + expandible.clientHeight);
    console.log('offsetHeight: ' + expandible.offsetHeight);
    console.log('scrollHeight: ' + expandible.scrollHeight);

    if (!$(expandible).data('collapsed-height')) {
        $(expandible).data('collapsed-height', expandible.clientHeight);
    }

    var expandedHeight = expandible.scrollHeight;
    var collapsedHeight = $(expandible).data('collapsed-height');
    var currentHeight = expandible.clientHeight;

    if (currentHeight < expandedHeight) {
        $(expandible).css('height', expandedHeight);
    }
    else {
        $(expandible).css('height', collapsedHeight);
    }
});