JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<br />
<br />
<br />
<div class="ft-small-twitter expand">sdsfsdfsf</div>

CSS

.ft-small-twitter{
    width:200px;
    height:30px;
   border:1px solid red;
   background:#124356;
    text-indent:30px;
    -webkit-box-sizing:border-box;
}

JavaScript

$('.ft-small-twitter').click(function() {
    console.log("started at", $(this).height() );    
    
    if ( $(this).hasClass('expand') ){
        $(this).animate({
            'height':'+=30px'
        }, 500, function(){
            $(this).removeClass('expand');

            console.log("grow", $(this).height() );
        });
    } else {
        $(this).animate({
            'height':'-=30px'
        }, 500, function(){
            $(this).addClass('expand');

            console.log("shrink", $(this).height() );
        });
    }
});