JSFiddle - React, Tailwind, and code Playground

by Zuriel

HTML

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

<div class="clearBoth"></div>

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

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

<a href="#" class="animateBoth">Animate Both</a> |

<a href="#" class="reset">Reset</a>

CSS

.test {
     width: 100%;
     height: 0px;
     background: red; 
     display: block;
     float: left; 
    overflow: hidden;
}

.test .inner {
    width: 100%;
    height: auto;  
    float: left;
    border: 1px solid #000;
}

.clearBoth {
   clear: both;
   width: 100%;
   height: 0;
   display: block; 
}

JavaScript

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

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

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000, alertMe); 
});

$(".reset").bind("click", function(e){
    $(".test").animate({"width":"100%","height":"0px"}, 1000);    
});

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();
        
        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });  
}

function alertMe() {
    alert("boom");
};