JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="warp bg">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>



<div class="items">
    <div class="warp bg">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

CSS

.items{
    margin-bottom:40px;
}


.warp{
    background:yellow;
    height:20px;
    width:300px;
    color:white;
    border:5px solid #f45;
   
}
span.click{
    color:black;
    float:right;
}
.change{color:black;}
.red{
    background:red;
    border:5px solid black; 
    width:300px;
}
.black{
    background:black;
    border:5px solid black; 
    width:300px;
    color:white;
}
.bg{
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}

JavaScript

$('.invisible').hide();
$(".warp").click(function () {
            $(this).next('div').slideToggle("slow", function () {
                $(this).prev('div').toggleClass('bg');
                $(this).prev('div').find('.click').slideToggle("fast", function () {});
            });
});