手风琴的CSS过渡动画顺序问题

Question

我在下面的两个div框示例中使用了<h4>标头，然后是带有文本的<p>。在手风琴样式中，我想单击每个标题并看到出现的文本，方法是将文本div容器框设置为max-height: 0;和opacity: 0;，然后将max height设置为一个值，并设置不透明度1点击。

我的问题是我希望两个框同时发生动画（一个框向上滑动并隐藏，另一个框向下滑动并出现），但是，我使动画按顺序运行向上滑动并消失，向前滑动则消失并出现。

如何同时获得它们？

document.addEventListener('DOMContentLoaded', function() {

  // main click handler for the whole page
  document.addEventListener('click', function(event) {

    var clickedElem = event.target;

    if (clickedElem.matches(".slide-card h4")) {

      var activeCards = document.querySelectorAll(".card-active");

      if (activeCards) {
        for (var i = 0; i < activeCards.length; i++) {
          if (activeCards[i]) toggle(activeCards[i], "card-active");
        }
      }

      toggle(clickedElem.parentNode, "card-active");
    }
  });
});


function toggle(el, elClass) {
  if (el.matches("." + elClass)) {
    el.classList.remove(elClass);
  } else {
    el.classList.add(elClass);
  }
}

h4 {
  cursor: pointer !important;
}

.slide-card {
  border: 1px solid white;
  padding: 1em;
}

.animated-slides-cards {
  background: pink;
  padding: 1em;
}

.card-body {
  opacity: 0;
  max-height: 0;
  transition: all 0.75s ease-out;
}

.card-active .card-body {
  opacity: 1;
  max-height: 400px;
}

<div class="animated-slides-cards">
  <div data="0" class="slide-card block-padding margin-bottom-05x card-active">
    <h4 class="blue">Harness the power of the crowd</h4>
    <div class="grey card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis eros vitae metus sodales eget suscipit purus rhoncus. Proin ultrices gravida dolor, non porttitor enim interdum vitae. Integer feugiat lacinia tincidunt. Nulla laoreet tristique
        tristique. Sed elementum justo a nisl elementum sit amet accumsan nisi tempor. Nulla quis eros et massa dignissim imperdiet a vitae purus.</p>
    </div>
  </div>
  <div data="1" class="slide-card block-padding margin-bottom-05x">
    <h4 class="blue">Slots straight into your systems</h4>
    <div class="grey card-body">
      <p>Using simple APIs, SmartCrowd™ connects to your systems and allocates tasks to ambassadors using your existing digital channels. You can opt for full integration or simply use Limitless Live Messenger on your website to maintain a single customer
        view.</p>
    </div>
  </div>
</div>