ブートストラップ3崩壊他

Question

私は下の画像のような折りたたみボックスを作成しようとしています。私はそれのようなボックスのカップルを表示する必要がありますが、折り畳み可能なボックスが開いているときはいつも他のものを隠したい。ブートストラップ崩壊を使用してみましたが、DOM構造が必要で問題があるように見えます：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

、あなただけのため、ブートストラップの崩壊のバグのため、あなたの#moreInfoのdiv内.panelクラスを追加する必要がありますデータ - 親 - 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