JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<div class="clickable spot well" id="spot1">
<div class="white"></div>
<article class="purple" id="story1">
<div>
<p class="date">posted 20 Jan 14</p>
<p class="region">Bangladesh</p>
<p class="title">Story Title</p>
<p>Egestas eros ac risus faucibusr</p>
<button class="close_button btn btn-primary">CLOSE</button>
</div>
</article>
</div>
<div class="clickable spot well" id="spot3">
<div class="white"></div>
<article class="purple" id="story1">
<div>
<p class="date">posted 20 Jan 14</p>
<p class="region">Bangladesh</p>
<p class="title">Story Title</p>
<p>Egestas eros ac risus faucibusr</p>
<button class="close_button btn btn-primary">CLOSE</button>
</div>
</article>
</div>
<div class="clickable spot well" id="spot3">
<div class="white"></div>
<article class="purple" id="story1">
<div>
<p class="date">posted 20 Jan 14</p>
<p class="region">Bangladesh</p>
<p class="title">Story Title</p>
<p>Egestas eros ac risus faucibusr</p>
<button class="close_button btn btn-primary">CLOSE</button>
</div>
</article>
</div>
CSS
.spot{
width: 10px;
height: 10px;
overflow: hidden;
cursor: pointer;
float: left;
margin-right: 10px;
}
.grown{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}
JavaScript
$(document).on("click", ".close_button", function () {
$(this).closest(".grown").toggleClass("spot grown clickable");
});
$(document).on("click", ".clickable", function () {
$(this).toggleClass("spot grown clickable");
});