Аккордеон внутри Tabs Bootstrap

Question

Итак, у меня есть вкладка на моей странице, и внутри каждой вкладки мне нужен аккордеон, так как у меня много информации, выводимой пользователю. Моя проблема в том, что когда страница загружается, аккордеоны не складываются. Они все расширены, хотя для aria-expanded установлено значение false. Когда я нажимаю на заголовок, чтобы закрыть раздел, он отображает анимацию, в которой он будет играть, как если бы он расширялся. Нажмите его еще раз, и он закроется. вот мой тестовый код:

<ul class="nav nav-pills" role="tablist"> 
<li role="presentation" class="active"><a href="#open" aria-controls="open" role="tab" data-toggle="tab">Open Tickets</a></li> 
</ul><br> 

<!--The Tab Contents--> 
<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane fade in active" id="open"> 
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel panel-info"> 
       <div class="panel-heading" role="tab" id="headingOne"> 
        <span> 
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Info One</a> 
        </span> 
       </div> 
       <div id="collapseOne" class="panel-collapse" role="tabpanel" aria-labelledby="headingOne"> 
        <div class="panel-body"> 
         Content Here 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-info"> 
       <div class="panel-heading" role="tab" id="headingTwo"> 
        <span> 
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Info One</a> 
        </span> 
       </div> 
       <div id="collapseTwo" class="panel-collapse" role="tabpanel" aria-labelledby="headingTwo"> 
        <div class="panel-body"> 
         Content Here 
        </div> 
       </div> 
      </div> 
      <div class="panel panel-info"> 
       <div class="panel-heading" role="tab" id="headingThree"> 
        <span> 
         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Info One</a> 
        </span> 
       </div> 
       <div id="collapseThree" class="panel-collapse" role="tabpanel" aria-labelledby="headingThree"> 
        <div class="panel-body"> 
         Content Here 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Так это потому, что это баян вложен в группу вкладок, или это то, что я над смотреть.

Answer 1

Вы должны добавить .collapse класс к .panel-body «s родительского DIV:

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
    <div class="panel-body"> 
     Content Here 
    </div> 
</div> 

https://jsfiddle.net/p1ft7r7r/