2016-05-31 185 views
4

因此,我在我的網頁上有一個引導式手風琴 - 但在開始時,第一個面板已打開。 我怎樣才能使它,當你加載頁面,他們都關閉?Bootstrap手風琴 - 開始全部關閉

任何幫助將非常感謝!非常感謝!

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

回答

13

只要從panel1刪除.in

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