JSFiddle - React, Tailwind, and code Playground

by Lal Prakash

HTML

<img id="img1" data-id="div1"/>
<img id="img2" data-id="div2"/>
<img id="img3" data-id="div3"/>
<img id="img4" data-id="div4"/>

<br/>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

CSS

div,
img {
    float:left;
    display:block;
    height:40px;
    width:40px;
    cursor:pointer;
}
div {
    display:none;
    position:absolute;
    top:50px;
}
#img1{background:#b00;}
#img2{background:#c00;}
#img3{background:#b00;}
#img4{background:#c00;}
#div1{background:#077;left:0;}
#div2{background:#0b0;left:40px;}
#div3{background:#b0b;left:80px;}
#div4{background:#000;left:120px;}

br {clear:both;}

JavaScript

$("#img1").on('click', function() {
   $("div").hide();
   $('#'+$(this).data('id')).show();
});

$("#img2").on('click', function() {

    $("div").hide();
   $('#'+$(this).data('id')).show();
});

$("#img3").on('click', function() {

    $("div").hide();
   $('#'+$(this).data('id')).show();
});

$("#img4").on('click', function() {

   $("div").hide();
   $('#'+$(this).data('id')).show();
});