JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div class="image-container"><img height="100" width="100" src="http://i.stack.imgur.com/Mmww2.png" alt="SmallImage1" /></div>
<div class="image-container"><img height="100" width="100" src="http://i.imgur.com/skqk9Fh.jpg" alt="SmallImage2" /></div>
<div class="image-container"><img height="100" width="100" src="http://logonoid.com/images/css3-logo.png" alt="SmallImage3" /></div>
<br style="clear: both;"/>
<div class="sliding-div"><img height="200" width="200" src="http://i.stack.imgur.com/Mmww2.png" alt="bigImage1" /></div>
<div class="sliding-div"><img height="200" width="200" src="http://i.imgur.com/skqk9Fh.jpg" alt="bigImage2" /></div>
<div class="sliding-div"><img height="200" width="200" src="http://logonoid.com/images/css3-logo.png" alt="bigImage3" /></div>

CSS

.image-container {
    float: left;
}
.sliding-div {
    float: left;
}

JavaScript

$(document).ready(function(){
    $('.image-container').on('click',function(){
        $('.sliding-div').eq($(this).index()).stop().slideToggle();
    });
});