JSFiddle - React, Tailwind, and code Playground

by Samuel Fullman

HTML

<input type="button" id="doit" value="do it" />
<br>
<div id="stage">
this is the initial text    
</div>
<div id="what">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum orci id nisl aliquam, et gravida velit scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a vulputate arcu. Integer eleifend, dolor at pellentesque semper, mi odio rhoncus lacus, commodo fermentum mi dolor sed mauris. Curabitur porttitor pharetra sem, imperdiet suscipit augue fermentum vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sit amet orci tortor. Vestibulum dictum pretium augue at posuere.
 
        </div>

CSS

#stage{
    border:1px solid #000;
    padding:15px;
    width:300px;
    overflow:hidden;
}
#what{
    display:none;
}

JavaScript

$(document).ready(function(){
    $('#doit').click(function(){
        var h1=$('#stage').height();
        $('#stage').fadeOut({/*queue: false,*/ duration: 'slow'});
        $('#stage').html($('#what').html());
        var h2=$('#stage').height();
        $('#stage').fadeIn({/*queue: false,*/ duration: 'slow'});
        $('#stage').animate({ height: h2+'px' }, 'slow');
    });

});