JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="clickMe">Click Me</div>
<div class="clickMeInfo">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<div class="clickMe">Click Me</div>
<div class="clickMeInfo">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<div class="clickMe">Click Me</div>
<div class="clickMeInfo">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

CSS

.clickMe{ display: block; background: #dedede; height: 30px; width: 100px; line-height: 30px; text-align: center; cursor: pointer }

.clickMe:hover{ background: #343434; }

.clickMeInfo{ background: #dedede; margin-bottom: 20px; padding: 5px 10px 10px; }

JavaScript

$(document).ready(function() {
    $('.clickMeInfo').hide();
    $('clickMe').click(function() {
       $(this).next('.clickMeInfo').fadeIn('fast');
    });
});