JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden contentThis is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden contentThis is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden contentThis is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden contentThis is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden content This is hidden contentThis is hidden content 
    </div>
</div>

CSS

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    max-height:0px;
       -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
}
    .hidden.open {
        max-height:200px;
     -webkit-transition:height, 0.5s linear;
    -moz-transition: height, 0.5s linear;
    -ms-transition: height, 0.5s linear;
    -o-transition: height, 0.5s linear;
    transition: height, 0.5s linear;
    }

JavaScript

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});