JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<h2 class="button">Click me</h2>
<div class="expand">Lot of text here....<br/><br/><br/><br/><br/><br/><br/>asdasdtext here....<br/><br/><br/><br/><br/><br/><br/>asdasdtext here....<br/><br/><br/><br/><br/><br/><br/>asdasdtext here....<br/><br/><br/><br/><br/><br/><br/>asdasdtext here....<br/><br/><br/><br/><br/><br/><br/>asdasdtext here...</div>

CSS

.expand {
    height: 30px; 
    overflow:hidden;
    background-color:#DDD;
}

JavaScript

$("h2.button").click(function() {
    //note than the selectors used here will result in somewhat odd behaviour if there 
    //are multiple div.expand elements in the page :)
    $("div.expand").animate({
        height : $("div.expand")[0].scrollHeight
    },2000);
});