Grid With Multiple Show/hide Elements And Multiple Rows

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

Solution 1:

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>

Solution 2:

You should save the expanded element and update it on every click

try to set the variable var expandedEl = null;

and then change the toggleClass to removeClass and addClass

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

here is your example, but you need to work on it a bit more to hide the content on collapse:

https://jsfiddle.net/d2w1vb7k/5/