JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mydiv">
  <h2>Hello</h2>
  <p>Here is some sample text.</p>
  <p>Here is some more</p>
  <h2>Another heading</h2>
  <p>More sample</p>
</div>
<a class="show-more">Show more</a>

CSS

.mydiv{
  height:50px;
  /* min-height:50px; */
  overflow:hidden;
  display:block !important;
}
a {
  display: block;
}

JavaScript

$( "document" ).ready(function() {
  $(".show-more").click(function(){
    if($(".mydiv").css("height") === "50px"){
     $(".mydiv").css("height", 'auto');
      $(".mydiv").slideDown();
     
    }
    else{
    $(".mydiv").css("height", '50px');
      $(".mydiv").slideUp();
      
    }
  });
});