JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#">toggle</a>
<div class="collapsible">
<div>
lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit
lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit
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
.collapsible {
transition: max-height .5s;
overflow: hidden;
}
JavaScript
var
collapsible = $('.collapsible').css('max-height', 0);
$('a').click(function() {
collapsible
.css({
'max-height' : collapsible.hasClass('expanded') ?
0 :
collapsible.children().outerHeight() + 'px'})
.toggleClass('expanded');
});