Bootstrap Akkordeon - starte alle geschlossen

Question

So habe ich ein Bootstrap-Akkordeon auf meiner Seite - aber beim Start ist das erste Panel offen. Wie kann ich es so machen, dass, wenn Sie die Seite laden, sie alle geschlossen sind?

Jede Hilfe würde wirklich geschätzt werden! Vielen Dank!

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-minus text-primary"></i> Overview</a> 
      </h4> 
     </div> 
     <div id="panel1" class="panel-collapse collapse in"> 
      <div class="panel-body">Contents panel 1</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a> 
      </h4> 
     </div> 
     <div id="panel2" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 2</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a> 
      </h4> 
     </div> 
     <div id="panel3" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a> 
      </h4> 
     </div> 
     <div id="panel4" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a> 
      </h4> 
     </div> 
     <div id="panel5" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a> 
      </h4> 
     </div> 
     <div id="panel6" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a> 
      </h4> 
     </div> 
     <div id="panel7" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a> 
      </h4> 
     </div> 
     <div id="panel8" class="panel-collapse collapse"> 
      <div class="panel-body">Contents panel 3</div> 
     </div> 
    </div> 
</div> 

Answer 1

Entfernen Sie einfach .in von panel1.

<div id="panel1" class="panel-collapse collapse"> 
    <div class="panel-body">Contents panel 1</div> 
</div>