JSFiddle - React, Tailwind, and code Playground

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;
}

#click-me {
    cursor: pointer;   
}

JavaScript

$('#click-me').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});