Team Accordion Grid

by Kevin Pliester

HTML

<div id="wrapper">
  <div class="casusbene-team-grid">
    <div class="casusbene-team-grid__item">
      M1
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #1
    </div>
    <div class="casusbene-team-grid__item">
      M2
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #2
    </div>
    <div class="casusbene-team-grid__item">
      M3
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #3
    </div>
  </div>
  <div class="casusbene-team-grid">
    <div class="casusbene-team-grid__item">
      M1
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #1
    </div>
    <div class="casusbene-team-grid__item">
      M2
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #2
    </div>
    <div class="casusbene-team-grid__item">
      M3
      <button>
        Mehr
      </button>
    </div>
    <div class="casusbene-team-grid__more">
      #3
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

#wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 30em) {
  .casusbene-team-grid {
    display: grid;
    grid-template-areas:
      "item item item"
      "desc desc desc";
    grid-template-columns: 1fr 1fr 1fr;
  }

  .casusbene-team-grid__more {
    grid-area: desc;
  }
}

.casusbene-team-grid__item {
  background: #ccc;
  padding: 20px;
  border: 1px solid #999;
}

.casusbene-team-grid__more {
  max-height: 0;
  overflow: hidden;
  background: #aaa;
  transition: max-height 0.15s ease-in;
}

.casusbene-team-grid__more[data-open="yes"] {
  max-height: 1000px;
  transition: max-height 0.4s ease-in;
}

JavaScript

$('.casusbene-team-grid__item button').on('click', function(e) {
  $('.casusbene-team-grid__more').attr('data-open', 'no');

  $(this).closest('.casusbene-team-grid__item').next('.casusbene-team-grid__more').attr('data-open', 'yes');
});