JSFiddle - React, Tailwind, and code Playground

by ajmeese7

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 .35s ease-in-out;
    -moz-transition: height .35s ease-in-out;
    -ms-transition: height .35s ease-in-out;
    -o-transition: height .35s ease-in-out;
    transition: height .35s 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');
        
        var newHeight = $(".slideClone").height();
        $(".slideClone").remove();
        $('#this').css('height',newHeight + 'px');
    }
});