web-dev-qa-db-fra.com

L'accordéon Jquery ne s'effondre pas par défaut

J'utilise le plugin collapse fourni par bootstrap qui est un plugin jquery simple

Cependant, il s'effondre par défaut, comment modifier pour que l'élément de réduction soit masqué par défaut, uniquement lorsque j'appuie sur l'en-tête, puis l'élément se réduit et s'affiche? Je vous remercie

Le document du plugin, juste quelques lignes donc ça ne prend qu'une minute

$(document).ready( function () {
$(".collapse").collapse()({
  toggle: false,
  show: false
  });
} );

Voici le html:

<div class="accordion-group">
            <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
                  </div>   
          <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
           </div>
                           <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
                  </div>   
          <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
               content2
           </div>
javascriptjqueryjquery-uitwitter-bootstrapaccordion
21
user782104

Pour Bootstrap 3, certaines choses ont changé. Le code suivant accomplit la fonctionnalité souhaitée dans Bootstrap 3

Si vous souhaitez que le corps du panneau s'affiche par défaut:

<div id="collapseOne" class="panel-collapse collapse in">

Si vous souhaitez que le corps du panneau soit masqué par défaut:

<div id="collapseOne" class="panel-collapse collapse">

Voici un exemple:

<div class="bs-example">
    <div class="panel-group" id="accordion">

          <!- Repeat For Next Panel------->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                       xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                    </a>
                </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                   </div>
               </div> 
         </div>
            <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

     </div>
 </div>
59
Huntario
<div class="accordion-group collapse">
   <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
          Collapsible #1
   </div>   
   <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
           content1
   </div>
   <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
          Collapsible #2
    </div>   
    <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
          content2
    </div>
</div>
1
Bhargav Chudasama