JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<div class="box">
    <h2 class="box-title" href="#">Area 1</h2>
    <div class="box-content">

        <p>
            This is the box 1!<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed laoreet elit. Nulla consectetur malesuada ante a fermentum. Suspendisse in arcu sed ante porttitor sodales bibendum ut est. Morbi magna lacus, blandit pharetra condimentum faucibus, euismod eget velit. Fusce vel urna elit, vitae egestas arcu.
        </p>
                <a href="#" class="close-box">Close</a>
    </div>
</div>

<div class="box">
    <h2 class="box-title" href="#">Area 2</h2>
    <div class="box-content">

        <p>
            This is the box 2!<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed laoreet elit. Nulla consectetur malesuada ante a fermentum. Suspendisse in arcu sed ante porttitor sodales bibendum ut est. Morbi magna lacus, blandit pharetra condimentum faucibus, euismod eget velit. Fusce vel urna elit, vitae egestas arcu.
        </p>
                <a href="#" class="close-box">Close</a>
    </div>
</div>

<div class="box">
    <h2 class="box-title" href="#">Area 3</h2>
    <div class="box-content">

        <p>
            This is the box 3!<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed laoreet elit. Nulla consectetur malesuada ante a fermentum. Suspendisse in arcu sed ante porttitor sodales bibendum ut est. Morbi magna lacus, blandit pharetra condimentum faucibus, euismod eget velit. Fusce vel urna elit, vitae egestas arcu.
        </p>
                <a href="#" class="close-box">Close</a>
    </div>
</div>

<div class="box">
    <h2 class="box-title" href="#">Area 4</h2>
    <div class="box-content">

        <p>
            This is the box 4!<br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed laoreet elit. Nulla consectetur malesuada ante a fermentum. Suspendisse in arcu sed ante porttitor sodales...

CSS

*           {padding:0;margin:0;}
body        {font-family: Century gothic; color:#cf5;}
.box        {position:relative; width:300px;background:#4e4e4e;margin-bottom:10px;border:1px solid transparent;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
}
.box:hover{
            -webkit-box-shadow: 0px 1px 2px 0px #000000;;
            -moz-box-shadow: 0px 1px 2px 0px #000000;;
            box-shadow: 0px 1px 2px 0px #000000;; 
}
a.close-box {position:absolute;right:10px;bottom:2px;font-size:9px;color:#ccc;}
a.close-box:hover{color:#fff;}
.box-content{border-top:1px dotted #ccc;margin:0 10px 10px;}
h2.box-title{color:#ccc;text-decoration:none;outline:none;cursor:pointer;padding:10px;}
h2.box-title:hover{color:#fff;}

JavaScript

// box Toggler // by roXon
$('h2.box-title').each(function() {
    var $this = $(this);
    $this.next('.box-content').hide(); // Hide all contents

    function toggleActive() { 
        $('.active').toggleClass('active').next('.box-content').slideToggle(700); // same as "slideUp all .active"
    }

    $this.click(function() {
        if (!$(this).hasClass('active') ) { // if we just clicked a new title (that don't have .active)
            toggleActive();       // hide all and...
        }
        $this.toggleClass("active").next('.box-content').slideToggle(700); // add .active to title and open content
    });

    $(".close-box").click(function() {
        $(this).parent( toggleActive() );
    });
});