JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<div id="image_one" style="background-color:red;height:50px;width:50px"> </div>
<div id="image_two" style="background-color:blue;height:50px;width:50px"> </div>
<div id="image_three" style="background-color:yellow;height:50px;width:50px"> </div>
<div class="icon_one">Red</div>
<div class="icon_two">Blue</div>
<div class="icon_three">Yellow</div>
</html>
JavaScript
$(function(){
$('#image_one,#image_two,#image_three').hide();
//1//
$('.icon_one').click(function(){ $('#image_two,#image_three').fadeOut(function(){
$('#image_one').fadeIn();
});
});
//2//
$('#icon_two').click(function(){
$('#image_one,#image_three').fadeOut(function(){
$('#image_two').fadeIn();
});
});
//3//
$('.icon_three').click(function(){
$('#image_one,#image_two').fadeOut(function(){
$('#image_three').fadeIn();
});
});
});