ブートストラップアコーディオン/折りたたみハイブリッド？

Question

私は、複数のpanel-body要素を持つパネル要素にブートストラップアコーディオンのような機能を適用したいという状況があります。私は、パネル本体要素の1つを負荷時に展開し、他の要素を折りたたみたいと思います。 panel-footer要素には、panel-body要素を示すdata-toggle要素があります。 1つが折りたたまれていないときは、他は自動的に崩壊するはずです。ここで

は私が開始するために持っているものだが、期待通りのが動作していない：上記の例で

<div id="panel-parent" class="panel"> 
<h2 class="panel-title">Panel Title</h2> 
<div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div> 
<div id="panel2" class="panel-collapse collapse out">This div should be hidden at load</div> 
<div class="panel-footer"> 
    <span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span> 
    <span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span></div> 
</div> 

、「アウト」クラスは、負荷でパネルを隠していないと、データ・トグル要素はありません期待どおりに動作します。

Answer 1

outを使用する必要はありません。既定の状態です。ただ、.panelは、アコーディオンの親（panel-parent）の直接の子であることを確認してください。..

<div id="panel-parent"> 
    <div class="panel"> 
    <h2 class="panel-title">Panel Title</h2> 
    <div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div> 
    <div id="panel2" class="panel-collapse collapse">This div should be hidden at load</div> 
    <div class="panel-footer"> 
     <span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span> 
     <span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span> 
    </div> 
    </div> 
</div> 

http://www.codeply.com/go/phCyVlq3yf