Загрузочная сборная панель - начало с открытыми секциями

Я использую эту разметку для панели аккордеона Boostrap/складной панели. Как я могу отключить ВСЕ разделы, открытые на странице, вместо того, чтобы рухнуть?Загрузочная сборная панель - начало с открытыми секциями

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       collapsible stuff 
      </div> 
     </div> 
    </div> 
</div>

источник

2017-02-16 noclist

Возможная Дубликат [Twitter Bootstrap коллапса первый элемент & открытый второй элемент на нагрузке] (http://stackoverflow.com/questions/15771265/twitter -bootstrap-collapse-first-item-open-second-item-on-load) – isherwood

это не так, я хочу, чтобы все мои разделы были открыты. Не только первый. – noclist

Да, но применяется тот же метод. – isherwood

Вы просто должны добавить имя класса in к div.collapse элементу.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <a class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       collapsible stuff 
      </div> 
     </div> 
    </div> 
</div>

http://www.bootply.com/Gld6UPkkuL

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading" role="tab" id="headingOne"> 
 
       <h4 class="panel-title"> 
 
        <a class="collapsed accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Header </a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
       <div class="panel-body"> 
 
        collapsible stuff 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

источник

2017-02-16 21:15:28

Спасибо! Я замечаю, что все разделы автоматически закрываются, кроме того, что я расширяю. Любой способ предотвратить это? – noclist

Это не аккордеон, если он этого не делает. Вы можете просто использовать простой jQuery slideToggle. – isherwood

Загрузочная сборная панель - начало с открытыми секциями

ответ

Смежные вопросы