संकुचित बूटस्ट्रैप, पहला तत्व दिखाएं

Question

मैं इस ढहने वाले accordion का पहला तत्व दिखाना चाहता हूं। मैं इंटरनेट में लेकिन में कुछ शोध किया व्यर्थ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> 
 

 
<div class="accordion" id="accordion2"> 
 
    <div class="accordion-group"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" > 
 
     Aller au dossier personnel d'un agent 
 
     </a> 
 
    </div> 
 
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px; "> 
 
     <div class="accordion-inner"> 
 
     <form action="goToAgent.do" method="post"> 
 
      <p align="center"> 
 
      <input type="hidden" value="identite" name="retour"> 
 
      <label for="nomPrenom" > 
 
       Entrer le nom complet de l'agent: 
 
      </label> 
 
      <input type="text" name="nomPrenom" class="typeahead" /> <br> 
 
      <input type="submit" value="appliquer" class="btn btn-info" /> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="accordion-group"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
 
     Ajout d'un nouveau fonctionnaire 
 
     </a> 
 
    </div> 
 
    <div id="collapseTwo" class="accordion-body collapse"> 
 
     <div class="accordion-inner"> 
 
     <!-- lorem --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

मुझे नहीं लगता कि आप सभी HTML आप अकॉर्डियन के लिए की जरूरत है काम करने के लिए मिल गया है जब तक आप इसे सब से ऊपर पेस्ट नहीं किया है ।

http://twitter.github.com/bootstrap/javascript.html#collapse

मुझे लगता है कि यह वर्ग "में" है कि सेट इसे शुरू में खुलकर बात करना है:

बूटस्ट्रैप डॉक्स पहला उदाहरण पहला तत्व खुला होना करने के लिए सेट है।

<div class="accordion" id="accordion2"> 
<div class="accordion-group"> 
<div class="accordion-heading"> 
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
Collapsible Group Item #1 
</a> 
</div> 
<div id="collapseOne" class="accordion-body collapse in"> 
<div class="accordion-inner"> 
Anim pariatur cliche... 
</div> 
</div> 
</div> 
<div class="accordion-group"> 
<div class="accordion-heading"> 
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
Collapsible Group Item #2 
</a> 
</div> 
<div id="collapseTwo" class="accordion-body collapse"> 
<div class="accordion-inner"> 
Anim pariatur cliche... 
</div> 
</div> 
</div> 
</div> 

Answer 2

आपको बहुत दूर रास्ता देखना होगा।

आप .collapse को .in वर्ग QAD है, यह खुला रहता है:

<div class="accordion-group"> 
    <div class="accordion-heading"> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
    Ajout d'un nouveau fonctionnaire 
    </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse in"> 
    <div class="accordion-inner"> 
    </div> 
    </div> 
</div> 

Demo (jsfiddle)

---

आपका मार्कअप, गंदा है इसलिए यहाँ एक सही मार्कअप के साथ डेमो है: http://jsfiddle.net/Sherbrow/yYuRz/2/

यदि आप इसे डिस्पेंस करना चाहते हैं तो .collapse तत्व से style="height: 0px;" को हटाने की आवश्यकता है रखी।

Answer 3

तुम भी मुट्ठी पतन तत्व पर एक क्लिक के ट्रिगर कर सकते हैं

$("#accordion a:first").trigger("click");