JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div><span>Some Text</span></div>

CSS

div {
   width: 50px;
   height: 50px;
   display: block;
   background: red; 
}

div span {
   width: 300px;
   height: 400px;
   border: 1px solid blue;
   display: block;
}

JavaScript

$("div").bind("click", function(e){
    $(this).animateAuto("height", 1000, function(){
        $(this).animate({"height":"50px"},1000);
    }); 
});

(function($){
    $.fn.animateAuto = function(options) {
        var settings = $.extend({}, $.fn.animateAuto.defaultOptions, options);
        
        if(val === "auto" && ( name === "height" || name === "width" ) ){
             var $temp = jQuery(self).clone().css(name,"auto").insertBefore(self);
             val = $temp.css(prop);
             $temp.remove();
        }
        return this.each(function() {
            var $this = $(this);
        });
    };

    $.fn.pluginname.defaultOptions = {
    };
})(jQuery);