Bootstrap 3 collapse others

Question

Итак, я пытаюсь создать свертывающиеся коробки, как на изображении ниже. Мне нужно показать пару таких ящиков, но хочу скрыть других, когда открыт один складной ящик. Пробовал с помощью загрузочного коллапса, но похоже, что это проблема, где структура РОМ требуется: https://github.com/twbs/bootstrap/issues/10966

Есть ли другой способ достичь того же поведения без JavaScript?

Это то, что я имею в разметке:

<div class="col-xs-12 col-sm-8 col-lg-10"> 
    <div class="row"> 
     <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$600.00</span><span><a data-target="#moreInfoPastAmount" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoPastAmount" data-parent="#moreInfo">+Past Amount</a></span></div> 
     <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Var dates</span><span>$400.00</span><span><a data-target="#moreInfoLateFees" data-toggle="collapse" aria-expanded="true" aria-controls="moreInfoLateFees" data-parent="#moreInfo">+Late Fees</a></span></div> 
     <div class="col-xs-4 col-lg-2"><span class="text-uppercase">Mar 26</span><span>$200.00</span><span>Current Due</span></div> 
    </div> 
    <div id="moreInfo" class="row"> 
     <div class="col-xs-12"> 
      <div id="moreInfoPastAmount" class="arrow-box collapse in" aria-expanded="true"> 
       <div class="arrow left"></div> 
       <p>Content goes here</p> 
      </div> 
      <div id="moreInfoLateFees" class="arrow-box collapse in" aria-expanded="true"> 
       <div class="arrow left"></div> 
       <p>Content goes here</p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

После небольшого исследования, вам просто нужно добавить .panel класс внутри #moreInfo DIV, из-за ошибки в коллапсе Bootstrap в data-parent - https://github.com/twbs/bootstrap/issues/10966.

<div id="moreInfo" class="row"> 
     <div class="panel col-xs-12"> <!-- Panel added here --> 
      <div id="moreInfoPastAmount" class="arrow-box collapse" aria-expanded="true"> 

Demo Here