Bootstrap zusammenklappbare Platte - beginnen mit offenen Abschnitten

Question

Ich verwende diese Markup für ein Boostrap Akkordeon/zusammenklappbare Panel. Wie kann ich ALLE meine Sektionen beim Laden der Seite öffnen, anstatt sie zu reduzieren?

<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

Sie müssen nur die Klassennamen hinzufügen in zum div.collapse Elemente.

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