JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Click on an image for more info</h1>
<div id="sliderContent">
<div>
<img src="http://i.imgur.com/ABktns.jpg" />
<div>Content here.</div>
</div>
<div>
<img src="http://i.imgur.com/5jMR2s.jpg" />
<div>Other content here.<hr/></div>
</div>
<div>
<img src="http://i.imgur.com/4Z3Cos.jpg" />
<div>Sample content here.</div>
</div>
</div>
JavaScript
$(function() {
$("#sliderContent img").next().hide().append('<input type="button" value="close" />');
$("#sliderContent img").click(function() {
$(this).next().slideToggle();
});
$("input").click(function() {
$(this).parent().slideUp();
});
});