JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin-top:50px" />
<p>Some text here</p>

<div class="cbox">
    <div class="cbox-header">
        <span>Collapse Box</span>
        <button>+</button>
    </div>
    <div class="cbox-content" style="display:none;">blah blah contents go here blah</div>
</div>

<p>Some more text here</p>

<div class="cbox">
    <div class="cbox-header">
        <span>Another Collapse Box</span>
        <button>+</button>
    </div>
    <div class="cbox-content" style="display:none;">blah blah some more contents go here blah</div>
</div>

CSS

.cbox-header {
    border: 1px solid #000;
    margin: -1px 0px;
    background: #213121;
    color: #eee;
    padding: 1px 1px 1px 5px;
    font-weight: normal;
    font-size: 15px;
}
.cbox-header button {
    float: right;
    background: none;
    color: inherit;
    border: none; 
    padding: 0;
}
.cbox-content {
    border: 1px solid #000;
    padding: 5px;
    margin: 0px;
}
p {
    margin: 10px 0;    
}
body {
    background: #222;
    padding: 20px;
    color: white;
}

JavaScript

$('.cbox').on('click', '.cbox-header', function(e) {
    if($(e.target).is('span')) {
        return false; // Ignore clicks on span text
    }
    $(this).parent().children('.cbox-content').toggle();
});