Почему при повторном раскрытии аккордеона он начинает налазить на нижние блоки?

Question

ligisayan @ligisayan

Почему при повторном раскрытии аккордеона он начинает налазить на нижние блоки?

Всем привет!
Есть 3 столбца с текстовой информацией по мероприятию равной высоты в исходном состоянии независимо от количества контента в них.

Этого добился с помощью набора правил:

display: flex; flex-direction: column; align-items: stretch;

Далее, каждый список может раскрываться по кнопке подробнее и сворачиваться по крестику, при этом сохраняя исходную высоту других столбцов.

У меня получилось это реализовать только однократно для каждого столбца, при повторном развороте ракрываюшийся список начинает наползать на нижние блоки. Почему и как это можно устранить?

Вот код в фидл

var mh = 0;
$(".task-box").each(function() {
  var h_block = parseInt($(this).height());
  if (h_block > mh) {
    mh = h_block;
  };
});

$(".task-box-inner a[aria-expanded='false']").click(function() {
  var box = $(".task-box-inner a[aria-expanded='false']").not(this).parents(".task-box");
  box.each(function() {
    $(this).height(mh);
  });
});
$(".card-body a[aria-expanded='true']").click(function() {
  var closebox = $(".card-body a[aria-expanded='true']").parents(".task-box");
  closebox.each(function() {
    $(this).removeAttr("style");
  });
});

<div id="task">
  <div class="row">
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <div class="task-box-inner">
          <h4>Lorem ipsum dolor sit amet</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
          <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-1">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-2.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Repudiandae ipsa quae molestiae quis sint. </h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-2">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
              <p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 col-12 mb-5">
      <div class="task-box">
        <img class="img-fluid" src="img/event-3.jpg" alt="reportage">
        <div class="task-box-inner">
          <h4>Modi, nam maxime aspernatur necessitatibus.</h4>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem
            ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
					    Подробнее&nbsp;&nbsp;&nbsp;<i class="fa fa-plus" aria-hidden="true"></i>
					  </a>
          <div class="collapse" id="collapseevent-3">
            <div class="card card-body">
              <p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
              <p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
              <a class="join" href="#">Присоединиться</a>
              <a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

#task .row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#task .row>[class*='col-'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 20px;
}

.task-box {
  position: relative;
  margin: 0 auto;
  color: rgb(95, 112, 135);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  border: 1px solid #000;
}

.task-box .task-box-inner>a[aria-expanded="true"] {
  display: none;
}