Comment puis-je obtenir mon accordéon à charger avec tous les menus fermés?

Remplacement

 $(".collapse").collapse(); $('#accordion').collapse({hide: true}) 

avec:

 $('#collapseOne').collapse("hide"); 

Devrait faire l'affaire. Je pense que le premier est activé par défaut et cette seule ligne l'éteint.

Du document:

Si vous souhaitez ouvrir par défaut, ajoutez la classe supplémentaire dans.

En d'autres termes, laissez l'entrée "in" et la valeur par défaut sera close. http://jsfiddle.net/JBRh7/

Si vous souhaitez fermer tout effondré sur le chargement de la page:

Dans l' collapse in classe, remplacez-le par l' collapse classe.

 id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne"> 

Mise à jour de:

 id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 

Si vous souhaitez que l' accordéon s'effondre initialement, vous pouvez le faire avec des définitions de bootstrap préexistantes, javascript n'est pas nécessaire.

L'ajout de la classe collapsed sur l'ancre ou la poignée qui sera la cible de clic pour que les utilisateurs puissent les ouvrir ou les fermer. En outre, enlever le in classe du conteneur qui s'effondre.

Bootstrap fournit également quelques spécifications facultatives qui peuvent être transmises en ajoutant data-parent="" et data-toggle=""

• data-parent accepte un sélecteur et spécifie que tous les éléments pliables qui sont frères et sœurs du parent de données seront basculés à l'unisson.
• data-toggle accepte un booléen true ou false et définit l'invocation sur l'élément repliable.

Exemples de scénarios:

➤ Le chargement s'effondra

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> Details 

➤ Le chargement sera étendu

 <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"> Title </a> </div> <div id="collapseOne" class="accordion-body"> <div class="accordion-inner"> Details 

➤ Le chargement sera étendu

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Title </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Details 

Dans le 3ème exemple, l'accordéon sera par défaut d'être étendu indépendamment du fait que la classe collapsed est spécifiée car la classe sur le conteneur recevra plus de poids.

Si vous souhaitez déclencher l'accordéon via Javascript, il suffit d'appeler la méthode collapse() avec le identifiant approprié ou le sélecteur de classe qui cible l'élément repliable.

collapse() accepte également les mêmes options que celles qui peuvent être ajoutées au balisage. data-parent et data-toggle

Vous manquez la classe 'in' sur les divisions de corps d'accordéon pour Menu2 et Menu3

Chacune de vos divisions d'accordéon-corps doit avoir une class="accordion-body collapse in" . À l'heure actuelle, quelques-uns d'entre eux ont simplement une class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

Changement

 class="accordion-body collapse in" 

À

 class="accordion-body collapse" 

Sur votre collapseOne DIV

Vous pouvez passer l'option toggle: false à l'énoncé d'effondrement pour que tous les éléments de l'accordéon soient cachés lors de la charge, de la manière suivante:

 $('.collapse').collapse({ toggle: false }); 

Demo: http://jsfiddle.net/gqe7g/9/

C'est ce que j'utilise pour mon accordian. Il commence entièrement fermé. tu veux

  active: false;//this does the trick 

plein:

 <div id="accordian_div"> <h1>first</h1> <div> put something here </div> <h1>second</h1> <div> put something here </div> <h1>third</h1> <div> put something here </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#accordian_div").accordion({ collapsible: true, active: false, clearStyle: true }); }); </script> 

Pas familier avec le trajectoire des bottes, mais cela semble un peu plus propre que toutes les classes que vous avez à traiter et fonctionne en douceur.

Utilisez la méthode hide que Bootstrap fournit,

 $('.collapse').collapse('hide') 

Démo sur http://thefanciful.com . Mes informations sont cachées lors de la charge et s'activent lorsque le bouton est poussé. 🙂

Supprimez simplement la classe .in de .panel-collapse dans "collapseOne". (Bootstrap v3.3.7)

À l'aide de jQuery , cela a fonctionné pour moi ayant TOUTES les conteneurs effondrés à la charge de la page

Ajout de {active: false} et doit être collapsible bien sûr

  $(function () { $("#accordion").accordion({ collapsible: true, active: false }); $(".selector").accordion(); }); 

 <script type="text/javascript"> jQuery(document).ready(function ($) { $('#collapseOne').collapse("hide"); }); </script> 

Je sais que c'est une discussion ancienne, mais voici deux autres solutions qui ont fonctionné:

1) Ajouter

Une classe d' aria-expanded="true" dans ce lien:

 <a data-toggle="collapse" data-parent="#accordion"...></a> 

2) Si vous utilisez des panneaux (comme ci-dessous)

 <div id="collapse1" class="panel-collapse out collapse in" style="height: auto;"> 

Changer l' collapse in pour collapse out fera aussi l'affaire