JSFiddle - React, Tailwind, and code Playground

HTML

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

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

<div >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; }
.clickMe.active{ background: #f00; }

.clickMeInfo{ background: #dedede; padding: 5px 10px 10px; }

JavaScript

$(document).ready(function() {
    var $clickMe     = $('.clickMe'),
        $clickMeInfo = $('.clickMeInfo');
    $clickMeInfo.hide();


    $clickMe.click(function() {
        var $this = $(this),
            this_index = $clickMe.index($this);
        $clickMeInfo.fadeOut('fast').filter(':eq(' + this_index + ')').fadeIn('fast');
        $clickMe.removeClass('active');
        $this.addClass('active');
    });
});