JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="block">dasfdsfsdf</div>

CSS

.block {
    background: green;
    padding: 50px;
    border: 1px solid black;
}

JavaScript

var transitionend = (function () {
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
        'transition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'MozTransition': 'transitionend',
            'WebkitTransition': 'webkitTransitionEnd'
    }

    for (t in transitions) {
        if (el.style[t] !== undefined) {
            return transitions[t];
        }
    }
})();


$.fn.extend({
    forceRedraw: function () {
        this.outerHeight();
        return this;
    },
    close: function (duration, onCloseEnd) {
        var this_css_display = this.css('display'),
            $wrap = this.wrap('<div class="xxwrapxx">').parent(),
            height = $wrap.outerHeight() + "px",
            width = $wrap.outerWidth() + 'px',
            duration = typeof duration == "number" ? duration + 's' : '1s';

        $wrap


        $wrap
            .one(transitionend, function () {
                $wrap.css({
                    'width': 0,
                    'transition': 0
                });
                onCloseEnd && onCloseEnd();
            })
            .css({
                'display': this_css_display,
                'height': height,
                'width': width,
                'overflow': 'hidden'
            })
            .forceRedraw()
            .css({
                'transition': duration,
                'height': 0
            });
    },
    open: function ( duration ) {
        var $parent = this.parent(),
            $wrap,
            duration = typeof duration == "number" ? duration + 's' : '1s',
            width,
            height;
        
        if ( $parent.hasClass('xxwrapxx') ) {
            
            $wrap = $parent;
            $wrap
                .css('width', 'auto')
                .forceRedraw()
                .css('transition', duration);
        }
        
    }
});


$('.block').close();