JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="warp">
        <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">
        <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').addClass('bg');

$(".warp").click(function () {
    var $warp = $(this);
    
    $warp.next(".invisible").slideToggle("slow", function () {
        if ($(this).is(':visible')) {
            $warp.removeClass('bg');
        }else{            
            $warp.find('span.click').css('visibility', 'visible');  
            $warp.addClass('bg');
        }
    });
      
    $warp.find('span.click').css('visibility', 'hidden');      
  });