JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="panel" class="help closed" onclick="show()">
This is some test.
</div>

<div onclick="show()">
This is a link
</div>

CSS

.help {padding:20px;background-color:red;}

.closed {display:none;}

.open {display:block;opacity:0;transition: opacity 0.5s linear;}

.opacity {opacity:1;transition: opacity 0.5s linear;}

JavaScript

function show() {
var panel = document.getElementById('panel');

if(panel.className == "help closed"){
panel.className = "help open";
setTimeout(function(){ 

panel.className = "help open opacity";

}, 100);

}

else {

panel.className = "help open";
setTimeout(function(){ 

panel.className = "help closed";

}, 500);


}


}