JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

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

<a href="#" class="animateHeight">Animate Height</a>

<a href="#" class="animateWidth">Animate Width</a>

CSS

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

.test .inner {
    width: 300px;
    height: 200px;  
    float: left;
    border: 1px solid #000;
}

JavaScript

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

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000); 
});

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, temp;
    return this.each(function(i, el){
        var height = 0, width = 0, el = $(el);
        el.children().each(function (idx, child) {
            child = $(child);
            height += child.outerHeight();
            width += child.outerWidth();
        });
        if (prop === "height") {
            el.animate({"height": height}, 500);
        } else {
            el.animate({"width":width}, 500);
        }
    });  
}