JSFiddle - React, Tailwind, and code Playground

by Talty09

HTML

<div id="container">
    <div class="admin-container">
        <h2>Box 1</h2>
        <span class="collapse-x">X</span>
        <div class="clear"></div>
        <div class="admin-elements">
            <p>The elements will go here</p>
            <p>And here</p>
            <p>here also</p>
        </div>
    </div>
    <div class="admin-container">
        <h2>Box 2</h2>
        <span class="collapse-x">X</span>
        <div class="clear"></div>
        <div class="admin-elements">
            <p>The elements will go here</p>
            <p>And here</p>
            <p>here also</p>
        </div>
    </div>
</div>

CSS

#container
{
    margin-top: 30px;
}
.admin-container
{
    background: #afafac;
    margin: 10px 10px 10px 10px;
    padding: 3px 3px 3px 3px;
    overflow: hidden;
}
.admin-container h2
{
    float: left;
}
.admin-container span
{
    float: right;
}
.admin-elements
{
    display: none;
}
.clear
{
    clear: both;
}

JavaScript

$(function () {
    $(".collapse-x").on("click", function () {
       $(this).parent(".admin-container").children(".admin-elements").toggle();
    });
});