JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main-c">
<section id="main">
<aside class="column" id="o">
<div class="contain">
<figure class="icon one"></figure>
<section class="title"> <span class="toggle"></span>
<h2>One</h2>
</section>
<section class="body">
<h5>Toggle One</h5>
</section>
</div>
</aside>
<aside class="column" id="t">
<div class="contain">
<figure class="icon two"></figure>
<section class="title"> <span class="toggle"></span>
<h2>Two</h2>
</section>
<section class="body">
<h5>Toggle Two</h5>
</section>
</div>
</aside>
<aside class="column" id="th">
<div class="contain">
<figure class="icon three"></figure>
<section class="title"> <span class="toggle"></span>
<h2>Three</h2>
</section>
<section class="body">
<h5>Toggle Three</h5>
</section>
</div>
</aside>
</section>
<!-- Clear -->
<div class="clear"></div>
</div>
CSS
#main .column .contain .title .toggle, #main .column .contain .title .toggle-d {
width: 30px;
height: 30px;
background: black;
position: absolute;
right: 0;
top: auto;
margin: 5px 10px;
}
#main .column .contain .title .toggle-d {
background: red;
}
JavaScript
var c1 = $("#o");
var c2 = $("#t");
var c3 = $("#th");
$(document).ready(function () {
$(c1).hide(0).delay(500).fadeIn(1500);
$(c2).hide(0).delay(1500).fadeIn(1500);
$(c3).hide(0).delay(2500).fadeIn(1500);
});
var content = $("#main .column .body");
$(content).hide();
var t1 = $(".toggle");
$(t1).click(function () {
$(content).slideToggle('slow');
$(t1).toggleClass("toggle");
$(t1).toggleClass("toggle-d");
});