JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="test">
       <div class="inner">A bunch of text</div>
</div>

<a href="#" class="animate">Animate</a>

CSS

.test {
     width: 200px;
     height: 20px;
     background: red; 
     display: block;
     float: left; 
}

.test .inner {
    height: 200px;  
    float: left;
}

JavaScript

$(".animate").bind("click", function(e){
    $(".test").animateAuto("height", 500);
});

//
// Intended Fix for height/width animation of "auto" val 
//
jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, temp;
    return this.each(function(i, el){
        el = jQuery(el); 
        elem = el.clone().css(prop,"auto").insertBefore(el);
        temp = elem.css(prop);
        elem.remove();
        if(prop === "height")
            el.animate({"height":temp}, speed, callback);
        else if(prop === "width")
            el.animate({"width":temp}, speed, callback); 
    });  
};