JSFiddle - React, Tailwind, and code Playground

by Emanuele del Grande

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: 199px;
    max-height: 999999px;
    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

$(document).ready(function() {
	alert(document.getElementById('this').style.height + '--');
});
    $('#click-me').click(function() {
	alert(document.getElementById('this').style.height + '--');
/*
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');
    }
    */
});