JSFiddle - React, Tailwind, and code Playground

by rajeevRF

HTML

<div id="holder1" class="image_holder">
<img src="https://s3.amazonaws.com/images.seroundtable.com/google-submit-url-1516800645.jpg">
</div>
<div id="holder2" class="image_holder">
<img src="https://s3.amazonaws.com/images.seroundtable.com/google-moving-1570105501.jpg">
</div>
<div id="holder3" class="image_holder">
<img src="https://s3.amazonaws.com/images.seroundtable.com/google-core-1582047585.jpg">
</div>

<div id="image_link1" class="image_link">Image 1</div>
<div id="image_link2" class="image_link">Image 2</div>
<div id="image_link3" class="image_link">Image 3</div>

CSS

.hide_div{display:none;}
.show_div{display:block;}
img{max-width:200px;}

JavaScript

$(document).ready(function(){

        $(".image_holder").addClass('hide_div');
        $("#holder1").addClass('show_div');

    $('#image_link1').click(function(){
    $(".image_holder").addClass('hide_div');
    $(".image_holder").removeClass('show_div');
    $("#holder1").addClass('show_div');
    });
    $('#image_link2').click(function(){
    $(".image_holder").addClass('hide_div');
    $(".image_holder").removeClass('show_div');
    $("#holder2").addClass('show_div');
     });
    $('#image_link3').click(function(){
    $(".image_holder").addClass('hide_div');
    $(".image_holder").removeClass('show_div');
    $("#holder3").addClass('show_div');
    });

});