JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div class='wrapper'>
    <button  id='a'>toggle</button>
    <div id='b' class='abc'></div>
    <div class='xyz'></div>
</div>

CSS

.wrapper {
    width:600px;
    height:600px;
    border:1px solid red;
}
.xyz{
    border:1px solid blue;
    width:40px;
    height:40px;
}
.abc{
    width:400px;
    height:400px;
    background-color:black;
/*   display:none;*/
    /*opacity:0;*/
    height:0px;
    margin-top:-400px;
     transition: all .3s ease-in;
    
}
.abc.def{
    margin-top:0px;
    height:500px;
/*    opacity:1;*/
}

JavaScript

document.getElementById('a').addEventListener('click',function(){
    document.getElementById('b').classList.toggle('def');
});