JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

CSS

#this {
    width: 500px;
    height: 0;
    max-height: 9999px;
    overflow: hidden;
    background: #BBBBBB;
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -ms-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
}

#click-me {
    cursor: pointer;   
}

JavaScript

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    var clone = $('#this').clone()
      .css({
        'position': 'absolute',
        'visibility': 'hidden',
        'height': 'auto'
      })
      .addClass('slideClone')
      .appendTo('body');

    //$("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
    //var newHeight = $("#this").height();
    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    //$("#this").css({'position':'static','visibility':'visible','height':'0'});
    $('#this').css('height', newHeight + 'px');
  }
});