JSFiddle - React, Tailwind, and code Playground

by pellepim

HTML

<div id="outer">
    <div id="inner">
    
    </div>
</div>
<a id="firstbutton" href="#">First</a> | <a id="secondbutton" href="#">Second</a>

CSS

#outer {
    border: 1px solid #000;
    overflow: hidden;
    height: 50px; 
}

JavaScript

$("#firstbutton").click( function (){
$("#inner").html("hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>hello<br>");  
    
    adjustHeight();
});

$("#secondbutton").click( function (){
    $("#inner").html("hello");
    adjustHeight();
});

function adjustHeight() {
    $("#outer").animate({height : $("#inner").height()}, 800);   
}