बूटस्ट्रैप

Question

में डिफ़ॉल्ट रूप से accordion बंद करें मैं बूटस्ट्रैप Accordion का उपयोग कर रहा हूँ। मैं चाहता हूं कि सभी पैनल डिफ़ॉल्ट रूप से बंद हो जाएं, लेकिन मेरे पैनलों का विस्तार शुरू हो गया है।

यहाँ मेरी कोड है:

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

मैं भी aria-expanded="false" इस्तेमाल किया है, लेकिन यह काम नहीं करता।

क्या गलती है?

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

आप कक्षा में in से छुटकारा पाने के है, यह के रूप में आप यह संरचित है काम करना चाहिए:

Answer 1

इस लाइन यहां अपराधी हो रहा है। दो पैनलों के बीच अंतर को देखने के लिए इस उदाहरण पर एक नज़र डालें:

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

सूचना पहले पैनल class=collapsed यह <a> टैग है, और यह है पर in वर्ग है पर नहीं है <div> टैग, और खोलने शुरू होता है। दूसरा पैनल उनको स्विच करता है, और बंद कर देता है।

संपादित

एक Bootply नहीं, हो रही "अनुप्रयोग त्रुटि" रख सकते।