JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

some text 
<div>click here</div>
some text
<button>toggle</button>

CSS

div{
 width:200px;height:200px;
 opacity:1;
 overflow:hidden;
 line-height:200px;
 text-align:center;
 background-color:green;
    -webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
 
 height:0px;
 opacity:0;
    -webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
}

JavaScript

var div=document.getElementsByTagName('div')[0],
    btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
 this.classList.add('hide');
},false);

btn.addEventListener('click',function(e){
 div.classList.toggle('hide');
},false);