JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

Nunc consequat consectetur augue. Pellentesque pellentesque magna ipsum, vel dignissim nisl ultrices molestie.

<div class="tool" onClick="anim(this)">
<div class="top"><div class="info">i</div></div>
<div class="mid"><div class="txt">Nunc consequat consectetur augue. Pellentesque pellentesque magna ipsum, vel dignissim nisl ultrices molestie. Suspendisse ultrices convallis erat ut accumsan. Maecenas suscipit erat sit amet varius pellentesque. Nunc dapibus libero ipsum, eu ornare metus aliquet non. Cras et ultricies turpis, eget dignissim magna. Aliquam eget ligula velit.</div></div>
<div class="bot"></div>
</div>

Nunc consequat consectetur augue. Pellentesque pellentesque magna ipsum, vel dignissim nisl ultrices molestie.

CSS

.tool {float:right;}
.info {font-family:Georgia;font-size:14px;position:absolute;width:20px;height:20px;text-align:center;line-height:20px;color:#fff;cursor: pointer;}

.top, .bot {width: 20px;height: 10px;background-color: red;}

.top {border-radius:20px 20px 0 0;}

.topA, .botA, .midB { -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.3s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;}
    
.bot {border-radius: 0 0 20px 20px;}
    
.mid {overflow:hidden;max-height:0px;border:solid red;border-width:0 1px;}
.midB {width:20px;}

.txt {background-color: white;padding:5px;}

.midA {    -webkit-animation-name: txt; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0.4s;
    animation-name: txt;
    animation-duration: 0.5s;
    animation-delay: 0.4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {width: 20px;}
    to {width: 200px;}
}

/* Standard syntax */
@keyframes example {
    from {width: 20px;}
    to {width: 200px;}
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes txt {
    from {max-height:0px;}
    to {max-height:500px;}
}

/* Standard syntax */
@keyframes txt {
    from {max-height:0px;}
    to {max-height:500px;}
}

JavaScript

function anim(el) {
var top = el.firstElementChild;
var bot = el.lastElementChild;
var mid = el.children[1];
var info = el.firstElementChild.firstElementChild;
info.style.display = "none";
if (top.className == "top"){top.className = "top topA";}else {top.className = "top";}
if (bot.className == "bot"){bot.className = "bot botA";}else {bot.className = "bot";}
if (mid.className == "mid"){mid.className = "mid midA";}else {mid.className = "mid";info.style.display = "block";}

}