Bootstrap 3 kollabieren andere

Question

Also versuche ich eine kollabierende Boxen wie im Bild unten zu erstellen. Ich muss ein paar solcher Boxen zeigen, aber andere verstecken, wenn eine Faltbox geöffnet ist. Versuchte Bootstrap Zusammenbruch verwenden, aber sieht aus wie es ein Problem ist, wo die DOM-Struktur ist erforderlich: https://github.com/twbs/bootstrap/issues/10966

Gibt es eine andere Art und Weise das gleiche Verhalten, ohne Javascript zu erreichen?

Dies ist, was ich als Markup haben:

<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

Nach ein wenig Recherche, brauchen Sie nur eine .panel Klasse in Ihrem #moreInfo div hinzuzufügen, aufgrund eines Fehlers in Zusammenbruch des Bootstrap Daten-Eltern - 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