Grid with multiple show/hide elements and multiple rows

Issue

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.

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

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.

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

Solution

I think the code could be improved without saving a toggled element.

$(document).ready(function() {
  $(".toggle-button").on("click", function() {
    var target = $(this).data("target");
    if ($(this).hasClass("expand")) {
      $(this).toggleClass("expand");
      $(this).text('EXPAND');
      $("#" + target).removeClass("active");
    } else {
      $(".toggle-button").removeClass("expand");
      $(".toggle-button").text("EXPAND");
      $(".hidden-content").removeClass("active");
      
      $(this).toggleClass('expand');
      $(this).text('COLLAPSE');

      $("#" + target).toggleClass("active");
    }

  });
});

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 {
  height: 0px;
  visibility: hidden;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #65665d;
  text-align: center;
}

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

.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" data-target="content1">EXPAND</button>
  </div>

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

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

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

</div>



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

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

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

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

Answered By - Toan Lu