JSFiddle - React, Tailwind, and code Playground

by pbatey

HTML

<button>press me</button>
<div class="collapsable collapsed" id="outer">
    <div id='inner'>lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</div>
</div>
<div>lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</div>

CSS

.collapsable {
    width:100px;
    -webkit-transition: max-height .5s ease;
    -moz-transition: max-height .5s ease;
    transition: max-height .5s ease;
    background:#ccc;
    overflow: hidden;
}
.collapsed {
    max-height:0px;
}

JavaScript

$('button').bind('click', function (e) {
    e.preventDefault();
    var w = $('#outer');
    if (w.hasClass('collapsed')) {
        w.css({
            "max-height": $('#inner').outerHeight() + 'px'
        });

    } else {
        w.css({
            "max-height": "0px"
        });
    }
    w.toggleClass('collapsed');
});