JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<button>Clicky</button>
<div class="pagecontainer" style="height:0px; overflow:hidden;">
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
    <h1>1</h1>
</div>

JavaScript

initialheight = $(".pagecontainer").height();

function setContainerHeight() {
  var heightnow = $(".pagecontainer").height();
  var heightfull = $(".pagecontainer").css({
    height: 'auto'
  }).height();

  $(".pagecontainer").css({
    height: heightnow
  }).animate({
    height: heightfull
  }, 300);
}

$('button').on('click', function() {
  if ($(this).hasClass("heightfull")) {
    $(".pagecontainer").animate({
      height: initialheight
    }, 300);
  } else {
    setContainerHeight();
  }
  $(this).toggleClass("heightfull");
});