Аккордеонный второй уровень перекрывает первый

Question

Я изо всех сил пытаюсь заставить мой аккордеон работать.Когда я сворачиваю первый уровень, появляется второй, как следует, но тогда первый уровень все еще виден.

Аккордеон, не свернутый:

Аккордеон рухнул:

Я смотрел на это часами.Возможно, мне здесь не хватает чего-то глупого.

<div class='accordion' id='mainAccordion'>
  <div class='card'>
    <div class='card-header' id='headingOt'>
      <h2 class='mb-0'>
        <button aria-controls='collapseOt' aria-expanded='true' class='btn btn-link' data-target='#collapseOt' data-toggle='collapse' type='button'>
          <h2>Header</h2>
        </button>
        <div aria-labelledby='headingOt' class='collapse show' data-parent='#mainAccordion' id='collapseOt'>
          <div class='card-body'>
            dummy text
          </div>
        </div>
      </h2>
    </div>
  </div>
  <div class='card'>
    <div class='card-header' id='heading-nt'>
      <h2 class='mb-0'>
        <button aria-controls='collapseNt' aria-expanded='false' class='btn btn-link' data-target='#collapseNt' data-toggle='collapse' type='button'>
          <h2>header</h2>
        </button>
        <div aria-labelledby='headingNt' class='collapse show' data-parent='#mainAccordion' id='collapseNt'>
          <div class='card-body'>
            dummy text
          </div>
        </div>
      </h2>
    </div>
  </div>
</div>

------------------ Дополнение, 5 февраля 2019 ------------Прилагается небольшой GIF, который показывает, что происходит.Кажется, что аккордеон работает хорошо, он сворачивает текст ниже, второй заголовок сдвигается вверх, но затем первый текст всплывает снова.