JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="staff-wrap">
      <div class="staff-member">
        <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
        <button class="toggle-button item1">EXPAND</button>
      </div>

      <div class="staff-member">
        <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
           <button class="toggle-button item2">EXPAND</button>
      </div>

        <div class="staff-member">
        <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
           <button class="toggle-button item3">EXPAND</button>
      </div>

        <div class="staff-member">
        <img src="http://www.trusted.dev.creativecatmarketing.online/images/portrait.jpg" />
           <button class="toggle-button item4">EXPAND</button>
      </div>

    </div>


    <div id="hidden-content-wrap">
        <div id="content1">
            <div class="hidden-content">
                <p>"hidden content 1”</p>
            </div>
        </div>

        <div id="content2">
            <div  class="hidden-content">
                <p>"hidden content 2”</p>
            </div>
        </div>
        <div id="content2">
            <div class="hidden-content">
                <p>"hidden content 3”</p>
            </div>
        </div>

        <div id="content3">
            <div  class="hidden-content">
                <p>"hidden content 3”</p>
            </div>
        </div>

        <div id="content4">
            <div  class="hidden-content">
                <p>"hidden content 4”</p>
            </div>
        </div>

    </div>

CSS

p {
        margin: 0px;
        padding: 0px;
        }

        .staff-wrap {
      background-color: #f5f2f2;
      padding: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 0px;
      transition: all 0.5s ease-out;
        }

    .staff-member {
        flex-grow: 1;
        max-width: 250px;
        }

    .staff-member img {
        width: 100%;
        }


    #hidden-content-wrap {
        visibility: hidden;
        transition: all 0.5s ease-out;
        width: 100%;
        height: 0px;
        background-color: #65665d;
        }

    #hidden-content-wrap.active {
        height: auto;
        visibility: visible;
        transition: all 0.5s ease-in;
        }

    .hidden-content {
      height: 0px;
      visibility: hidden;
      transition: all 0.5s ease-in;
      color: white;
      background-color: #65665d;
      text-align: center;
      padding: 20px;

        }


    .active2 .hidden-content {
      height: 100px;
      visibility: visible;
      transition: all 0.5s ease-in;
        }

    .toggle-button {
        width: 100%;
        background-color: #65665d;
        color: white;
        margin-top: -2px;
        border: none;
        padding: 20px;
        margin-bottom: 0px;
        }
    .expand {padding-bottom: 40px;}

    button {
      display: inline-block;
        }

JavaScript

var expandedEl = null;
$(document).ready(function() {
  $(".toggle-button").on("click", function() {

    if(!$(this).hasClass('expand'))
    {
      if(expandedEl){
        expandedEl.removeClass('expand');
        expandedEl.text('EXPAND');
      }	
      $(this).addClass('expand');
      $(this).text('COLLAPSE');
			expandedEl = $(this);
    }


    $("#hidden-content-wrap").addClass("active"); 


    if($(this).hasClass('item1'))
    {
      $("#content1").toggleClass("active2");  
    }  
    if($(this).hasClass('item2'))
    {
      $("#content2").toggleClass("active2");  
    }
    if($(this).hasClass('item3'))
    {
      $("#content3").toggleClass("active2");  
    }
    if($(this).hasClass('item4'))
    {
      $("#content4").toggleClass("active2");  
    }        

  });
});