JSFiddle - React, Tailwind, and code Playground

by deleteman

HTML

<div id="leftpane">
    <a class="thumb" href="#"><img id="img_1" src="http://img1.jarfil.net/3/test_iq-pixels_5x5_v1-a.png"/></a>
    
    <a class="thumb" href="#"><img id="img_2" src="http://www.kriptopolis.org/images/clasifica.jpg"/></a>
    
    <a class="thumb" href="#"><img  id="img_3" src="http://www.blogdetrabajo.com/wp-content/uploads/test.jpg"/></a>
    
</div>
<div id="rightpane">
     <div id="prof_1" class="profile">Profile for image 1</div>
     <div id="prof_2" class="profile">Profile for image 2</div>
    <div id="prof_3" class="profile">Profile for image 3</div>
</div>

CSS

a.thumb img { 
    width:100px;
    
}
.profile {
    display:none;
}

JavaScript

$(".thumb").click(function() {
      var id = $(this).children("img").first().attr("id").split("_").pop();
  
    $(".profile").fadeOut('slow'); 
    $("#prof_" + id).fadeIn();
    return false;

});