JSFiddle - React, Tailwind, and code Playground

by collabcoders

HTML

<div id="wrapper"> 
<div class="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>

CSS

.expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }

JavaScript

$("#wrapper").on("click", ".expand_image", function () {
    if ($(this).height() == 300) {
       $(this).css('height', '100'); 
    } else {
       $(".expand_image").css('height', '100'); 
       $(this).css('height', '300');   
    }   
});