<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.images > div {
display: flex;
}
figure {
width: 20%;
}
figure > figcaption {
display: none;
}
figure > img {
cursor: pointer;
}
</style>
</head>
<body>
<section class="images">
<div>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
</div>
<div>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
</div>
</section>
<script>
var section = document.querySelector('.images'), figcaption;
section.onclick = function(e) {
if ( e.target.tagName.toLowerCase() != 'img' ) return;
var figcaptions = document.querySelectorAll('.images figcaption');
figcaption = e.target.nextElementSibling;
[].forEach.call(figcaptions, function(item) {
if(item == figcaption) return;
item.style.display = '';
});
figcaption.style.display = (figcaption.offsetHeight) ? '' : 'block';
};
</script>
</body>
</html>