JSFiddle - React, Tailwind, and code Playground

HTML

<button>Show details</button><br>
<div class="details">
    My details. <br>
    My details. <br>
    My details. <br>
    My details. <br>
    My details. <br>
    My details. <br>
    My details. <br>
    The end. <br>
</div>

CSS

.details {
    outline: 1px solid red;
    overflow:hidden;
    height: auto;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
}

.details.expanded {
    max-height: 200px;
}

JavaScript

$('button').bind('click', function(e) {     
    $('.details').toggleClass('expanded');
});