Önyükleme 3 diğerlerini daraltma

Question

Aşağıdaki resimde olduğu gibi bir daraltma kutuları oluşturmaya çalışıyorum. Bunun gibi birkaç kutuyu göstermem gerekiyor ama bir katlanabilir kutu açıkken başkalarını da saklamak istiyorum. önyükleme çöküşü kullanarak çalıştı ama DOM yapısı gerekli olan bir sorun var gibi görünüyor: https://github.com/twbs/bootstrap/issues/10966

javascript olmadan aynı davranışı elde etmek için başka bir yolu var mı?

Bu

ben İşaretleme olarak ne var: araştırma biraz sonra

<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

, sadece yüzünden Bootstrap çöküşü sırasında bir hata nedeniyle, senin #moreInfo div içinde bir .panel sınıf eklemeniz gerekir veri-ana - 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