具有多个显示/隐藏元素和多行的网格

我正在工作的网站上创建人员列表.我必须创建一个包含3列的连续4张图像的网格.在每列下方，可以通过展开"按钮展开更多信息.

I am creating a staff-list on a website I'm working on. I have to create a grid of 4 images in a row with 3 columns. Below each column, more info can expand from an "expand" button.

这是我所做的视觉示例: http://www.trusted.dev.creativecatmarketing.online/images/staff-member-list.png

here's a visual example of what I'm making: http://www.trusted.dev.creativecatmarketing.online/images/staff-member-list.png

我可以使用带有多个"if"语句的jquery来对div元素设置自定义类.然后，我为这些类设置了css样式，并且可以进行某些工作……但是我不得不重复两次以上，并且在动画中似乎已经有点问题了.

I have it sort of working with jquery with multiple "if" statements that set a custom class to div elements. I then have css styling for those classes, and it sort of works... but I have to duplicate this two more times and it already seems a bit buggy with the animation.

这是到目前为止我要发生的事情...

Here's what I got going on so far...

$(document).ready(function() {
  $(".toggle-button").on("click", function() {

    var $this = $(this).toggleClass('expand');
    if ($(this).hasClass('expand')) {
      $(this).text('COLLAPSE');

    } else {
      $(this).text('EXPAND');
    }


    $("#hidden-content-wrap").toggleClass("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");
    }

  });
});

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;
}

<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 4"</p>
    </div>
  </div>

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

</div>

<!--
		<div class="staff-wrap">
			staff member 1
			staff member 2
			staff member 3
			staff member 4
		</div>
		
		<div id="hidden-content-wrap">
			hiddent content 1
			hiddent content 2
			hiddent content 3
			hiddent content 4
		</div>
		-->

我希望隐藏的内容在打开第二个内容时自动消失.现在，这些元素的位置有点奇怪.

I would love hidden content to auto-disappear when a second one is toggled on. Right now the positioning of the elements works a little wonky.

我还必须对其余两行的if语句重复更多的整个过程...

I'll also have to repeat this whole process with more if statements for the remaining two rows...

    <!--
    <div class="staff-wrap">
        staff member 1
        staff member 2
        staff member 3
        staff member 4
    </div>

    <div id="hidden-content-wrap">
        hiddent content 1
        hiddent content 2
        hiddent content 3
        hiddent content 4
    </div>
    -->