ブートストラップ折りたたみパネル - セクションを開いて起動

Question

私はこのマークアップを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> 

Answer 1

あなただけdiv.collapse要素にクラス名inを追加する必要があります。

<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>