Bootstrap Accordion/Collapse hybrid?

Question

У меня есть ситуация, когда я хочу применить функцию бутстрапового аккордеона к элементу панели, который имеет несколько элементов панели. Я хотел бы, чтобы один из элементов панели был расширен при загрузке, а остальные были свернуты. Элемент панели-footer будет иметь элементы переключения данных, чтобы отображать элементы панели-корпуса. Каждый раз, когда кто-то не распался, другие должны автоматически разрушаться.

Вот что я должен начать, но он не работает, как ожидалось:

<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