JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clickable spot" 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> <a class="close_button">CLOSE</a> </div> </article> </div>

CSS

.spot {
    background: #aaa;
}
.grown {
    background: #F00;
}

JavaScript

var element = $(".clickable");
var closeButton = element.find(".close_button");
var onElementClick = function(e) {
    if(e.target !== closeButton[0]) {
        element.removeClass("spot").addClass("grown");
        element.off("click");
        closeButton.on("click", onCloseClick);
    }
}
var onCloseClick = function() {
    element.removeClass("grown").addClass("spot");
    closeButton.off("click");
    element.on("click", onElementClick);
}
element.on("click", onElementClick);