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

Question

Je suis en train de suivre l'exemple ici

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

J'ai fait une maquette ici

http://jsfiddle.net/gqe7g/

Chargement de comportement est étrange. Il montre Menu1 s'effondre alors il montre ensuite Menu2 et Menu3. Je voudrais tout d'ouvrir effondré. J'ai essayé sans succès

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

Answer 1

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/

Answer 2

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.

Answer 3

Si vous voulez l' accordéon à l'effondrement d'abord, vous pouvez le faire avec pré-existant bootstrap définitions, javascript est inutile.

Ajout de la classe collapsed à l'ancre ou à la poignée qui sera l'objectif de clic pour les utilisateurs de basculer entre eux ouvert/fermé. En outre, retirer l' in classe à partir de l'effondrement d'un conteneur.

Bootstrap propose également un couple de caractéristiques optionnelles qui peuvent être transmis par l'ajout d' data-parent="" et data-toggle=""

• data-parent accepte un sélecteur et précise que tous les réductible éléments qui sont les frères et sœurs des données-mère va être activée à l'unisson.
• data-toggle accepte un booléen true ou false et définit invocation sur la grille de l'élément.

---

Des Exemples De Scénarios:

➤ Charge s'est effondré

<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

➤ Charge élargie

<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

➤ Charge élargie

<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 3e exemple, l'accordéon sera, par défaut, être étendu, indépendamment du fait que l' collapsed classe est indiqué parce que l' in classe sur le conteneur va recevoir plus de poids.

---

Si vous ne souhaitez déclencher l'accordéon via Javascript, il suffit d'appeler la méthode collapse() avec les id ou le sélecteur de classe qui vise la réductible élément.

collapse() accepte également les mêmes options que peut être ajouté à la balise. data-parent et data-toggle

Answer 4

vous avez manqué la classe 'dans' accordéon-corps divs pour Menu2 et Menu3

chacun de vos accordéon-corps divs doit disposer d' class="accordion-body collapse in". En ce moment, un couple d'entre eux seulement ont class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

Answer 5

Vous pouvez passer l'option toggle: false de l'effondrement de l'instruction d'avoir tous les éléments de l'accordéon caché sur la charge, comme ceci:

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

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