JSFiddle - React, Tailwind, and code Playground

by xdumaine

HTML

<button id="toggle">Toggle</button>
<input type="text"/>
<div id="square" class="hidden collapsed">This is the square
    <input type="text"/>
</div>
<input type="text"/>

CSS

#square {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    overflow-x: hidden;
    
    animation-name: showBox;
    animation-duration: 1s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

/* only used for initial hidden state to prevent animation from occurring on load */
#square.hidden {
    visibility: hidden;
}

#square.collapsed {
    max-width: 0px;
    
    animation-name: hideBox;
    animation-duration: 1s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@keyframes hideBox {
    from   {max-width: 100px;}
    to {
        max-width: 0px;
        visibility: hidden;
    }
}

@keyframes showBox {
    from   {max-width: 0px;}
    to {max-width: 100px;}
}

JavaScript

$('#toggle').click(function() {
   $('#square').toggleClass('collapsed').removeClass('hidden'); 
});

$('#check').click(function() {
    alert($('#square').is(':visible'));
});