Bootstrap Accordion/Collapse hybrid？

Question

我有一種情況，我想將引導式手風琴式功能應用於具有多個面板主體元素的面板元素。我希望其中一個面板體元素可以在加載時展開，其他面元素可以摺疊。面板頁腳元素將具有數據切換元素以顯示面板主體元素。每次崩潰時，其他人應該自動崩潰。

這就是我要開始，但它並不如預期的工作：

<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

由於collapsed是默認狀態，因此不需要使用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