JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div id="details">
    <div style="background:#999;"> Content for div 1</div>
    <div style="background:#f0f;"> Content for div 2</div>
    <div style="background:#cb1;"> Content for div 3</div>
    <div style="background:#aba;"> Content for div 4</div>
</div>

CSS

.square{
    width: 80px;
    height: 80px;
    margin: 10px;
    float: left;
    background: #CCC;
    cursor:pointer;
}
#details{
    width: 380px;
    height: 100px;
    margin: 10px;
    clear:both;
    float: left;
    background:#999;
}
#details > div{
    position:absolute;
    width: 380px;
    height: 100px;
    display:none;
}

JavaScript

$(function(){ // DOM ready shorthand

    function fader(i){
       $('#details>div').stop().fadeTo(400,0).eq(!i?i:$(this).index()).fadeTo(400,1);
    }
    
    fader(0); // If you need it 
    
    $(".square").on("click", fader );
    
});