JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div class='item'>
    <h2>Blogs</h2>
    <div>Lorizzle ipsum dolizzle get down get down amizzle, consectetuer adipiscing uhuh ... yih!. Nullizzle shit velizzle, yo volutpat, suscipit quizzle, gravida boom shackalack, shizzlin dizzle. Pellentesque yo tortizzle.</div>
</div>
<div class='item'>
    <h2>Twitters</h2>
    <div>Lorizzle ipsum dolizzle get down get down amizzle, consectetuer adipiscing uhuh ... yih!. Nullizzle shit velizzle, yo volutpat, suscipit quizzle, gravida boom shackalack, shizzlin dizzle. Pellentesque yo tortizzle.</div>
</div>
<div class='item'>
    <h2>Dogs</h2>
    <div>Lorizzle ipsum dolizzle get down get down amizzle, consectetuer adipiscing uhuh ... yih!. Nullizzle shit velizzle, yo volutpat, suscipit quizzle, gravida boom shackalack, shizzlin dizzle. Pellentesque yo tortizzle.</div>
</div>
<div class='item'>
    <h2>Cats</h2>
    <div>Lorizzle ipsum dolizzle get down get down amizzle, consectetuer adipiscing uhuh ... yih!. Nullizzle shit velizzle, yo volutpat, suscipit quizzle, gravida boom shackalack, shizzlin dizzle. Pellentesque yo tortizzle.</div>
</div>

CSS

.item { width: 120px; border: 1px solid #EAEAEA; padding: 5px 10px; font: 90% arial, helvetica, sans-serif; }
.item div { display: none; font-size: 12px; margin-top: 10px; }

JavaScript

$('.item h2').click(function(e) {
    e.preventDefault();
    var $div = $(this).next('div');
    ($div.css('display') === 'none') ? $div.show('fast') : $div.hide('slow');
});