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: #0A0;
}

.close_button {
    display: none;
}

.grown .close_button {
    display: inline;
}

JavaScript

$(document).ready(function() {   
    $(".close_button").click(function (e) { 
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
        e.stopPropagation();
    });  

    $(".clickable").click(function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});