Akkordeon standardmäßig im Bootstrap geschlossen

Question

Ich benutze Bootstrap Akkordeon. Ich möchte, dass alle Fenster standardmäßig geschlossen werden, aber meine Fenster werden erweitert.

Hier ist mein Code:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false"> 
    <c:forEach items="${proposals}" var="proposal" varStatus="serial"> 
     <div class="panel panel-default"> 

      <div class="panel-heading" role="tab" id="heading${proposal.propID}" > 
       <h4 class="panel-title"> 
        <span class="fa fa-paperclip" aria-hidden="true"></span> 
        <a class="accordion-toggle collapsed" 
         data-toggle="collapse" data-parent="#accordion" 
         href="#collapse${proposal.propID}" aria-expanded="false" 
         aria-controls="collapse${proposal.propID}"> 
          ${proposal.title} 
        </a> 
       </h4> 
      </div> 

      <div id="collapse${proposal.propID}" class="panel-collapse collapse in" 
       role="tabpanel" aria-labelledby="heading${proposal.propID}"> 
       ${proposal.interest} 
      </div> 

     </div> 
    </c:forEach> 
</div> 

ich auch aria-expanded="false" verwendet, aber es funktioniert nicht.

Was ist der Fehler?

Answer 1

Diese Linie hier scheint der Schuldige zu sein:

<div id="collapse${proposal.propID}" class="panel-collapse collapse in" ... 

Wenn Sie in in der Klasse loszuwerden, sollte es funktionieren, wie Sie es strukturiert haben. Werfen Sie einen Blick auf dieses Beispiel den Unterschied zwischen den beiden Platten zu sehen:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 
 
      This Panel is Open By Default 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body"> 
 
     Open 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      This Panel Is Closed By Default 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body"> 
 
     Closed 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Hinweis die erste Platte nicht die class=collapsed hat auf sie <a>-Tag ist, und hat die in Klasse auf, es ist <div> Tag und startet OPEN. Das zweite Panel schaltet diese um und startet CLOSED.

EDIT

kann keine Bootply machen, halten "Application Error" zu bekommen.