web-dev-qa-db-fra.com

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

J'essaie de suivre l'exemple ici

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

J'ai placé une maquette ici

http://jsfiddle.net/gqe7g/

Le comportement de chargement est étrange. Il affiche Menu1 puis réduit, puis Menu2 et Menu3. Je voudrais que tout s'ouvre effondré. J'ai essayé ce qui suit sans succès

$('#accordion').collapse({hide: true})
javascripthtmltwitter-bootstrapjquery-events
62
Hoa

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 ligne l'éteint.

30
Vinayak Suley

De la doc:

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

En d'autres termes, laissez le "in" et la fermeture se fera par défaut. http://jsfiddle.net/JBRh7/

160
Vinay Sahni

Si vous souhaitez fermer tout le contenu réduit au chargement de la page:

En classe collapse in le remplace en classe collapse.

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">
31
sottany

Changement

class="accordion-body collapse in"

À

class="accordion-body collapse"

Sur votre collapseOne DIV

11
razzy

Si vous voulez que le accordéon à réduire vous puissiez le faire avec des définitions préexistantes bootstrap , javascript est inutile.

Ajouter la classe collapsed à l’ancre ou au handle qui sera la cible du clic pour que les utilisateurs basculent les ouvrent/se ferment. Supprimez également la classe in du conteneur en cours de réduction.

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

  • data-parent Accepte un sélecteur et spécifie que tous les éléments réductibles qui sont frères 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 réductible.

Exemples de scénarios:

➤ chargera réduit 

<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

➤ chargera é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

➤ chargera é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 développé par défaut indépendamment du fait que la classe collapsed soit spécifiée car la classe in du conteneur recevra plus de poids.

Si vous souhaitez déclencher l'accordéon via Javascript, il vous suffit d'appeler la méthode collapse() ainsi que le sélecteur id ou class approprié qui cible l'élément réductible.

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

9
davidcondrey

vous manquez la classe 'in' sur les divs corps accordéon pour Menu2 et Menu3

chaque div de votre corps d'accordéon doit avoir class="accordion-body collapse in". Pour le moment, quelques-uns d'entre eux n'ont que class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

7
csturtz

Vous pouvez passer l'option toggle: false à la déclaration collapse pour que tous les éléments de l'accordéon soient masqués lors du chargement, comme suit:

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

Démo: http://jsfiddle.net/gqe7g/9/

4
Andres Ilich

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

2
Tárcio Zemel

c'est ce que j'utilise pour mon accordéon. il commence complètement 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 bottstrap mais cela semble un peu plus propre que toutes les classes que vous avez à traiter et fonctionne bien.

2
Daniel Hunter

Utilisez la méthode hide que Bootstrap fournit,

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

Démo sur http://thefanciful.com . Mes informations sont masquées lors du chargement et s'activent lorsque vous appuyez sur le bouton. :)

1
Natasha Cozad
<script type="text/javascript">  

    jQuery(document).ready(function ($) {

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

</script>
0
MAFAIZ

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

1) Ajouter

une classe de 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;">

en changeant collapse in à collapse out fera aussi l'affaire

0
Stefanio

tilisation de jQuery, Cela fonctionnait pour moi avec TOUS les conteneurs collapsed au chargement de la page

Ajouter {active: false} et _ doivent avoir collapsible bien sûr activés

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