JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="container">
<div id="toggle">click me</div>
<div class="block">
</div>
</div>

CSS

.block {
    display: block;
    width: 250px;
    height: 100px;
    background: #000;
}
#toggle {
    position: absolute;
    display: block;
    color: #FFF;
    background: #e7b2d3;
}
#container {
    position: relative;
}

JavaScript

$('#toggle').toggle(function() {
    $('.block').delay(800).animate({width: 100}, 1000, function() {
       $(this).css('overflow', 'visible');
    });
}, function() {
    $('.block').animate({width: 250}, 1000, function() {
       $(this).css('overflow', 'visible');
    });
});