JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="square" contentId="c1"></div>
<div class="square" contentId="c2"></div>
<div class="square" contentId="c3"></div>
<div class="square" contentId="c4"></div>

<div id="details">Content for div 1</div>

<div style="display: none" id="c1"> Content for div 1</div>
<div style="display: none" id="c2"> Content for div 2</div>
<div style="display: none" id="c3"> Content for div 3</div>
<div style="display: none" id="c4"> Content for div 4</div>

CSS

.square{
    width: 80px;
    height: 80px;
    margin: 10px;
    float: left;
    background: #CCC;
}

#details{
    width: 380px;
    height: 100px;
    margin: 10px;
    float: left;
    background: #999;
}

JavaScript

$(".square").on("click", function() { 
    var id= $(this).attr("contentId");
    $(this).css('background','red');
    //$("#details");
    $('#details').fadeOut('slow', function() {
      $(this).html($("#" + id).html()).fadeIn('slow');
    });
});