web-dev-qa-db-fra.com

bootstrap élément initialement réduit

J'utilise le bootstrap template et j'aimerais changer la façon dont fonctionne le accordéon par défaut.

Comment puis-je obtenir que la bascule soit fermée lorsque la page est vue pour la première fois (lors du chargement)? 

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>
htmlcsstwitter-bootstraptoggle
55
JoshuaJeanThree

Lorsque vous développez ou réduisez accordéon, il ajoute/supprime simplement une classe "in" et définit le height:auto ou le 0 sur div de l'accordéon.

Demo

Donc, dans votre accordéon lorsque vous le définissez, supprimez simplement "in" class de la div comme ci-dessous. Chaque fois que vous développez un accorion, il ajoute simplement la classe "in" pour le rendre visible.

Si vous rendez la page avec "in" bootstrap cherche la classe et rendra la hauteur de la div: auto, si elle n'est pas présente, elle sera à une hauteur nulle.

<div id="collapseOne" class="accordion-body collapse">
86
PSL

Vous devez supprimer "in" de "collapse in"

34
elektrorl

une autre solution est d’ajouter toggle = false à la cible d’effondrement, cela arrêtera son ouverture et sa fermeture de manière aléatoire, ce qui se produit si vous supprimez simplement le "in"

par exemple

<div class="accordion-heading">
    <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#accordion2"
        href="#collapseOne">Open!</a>
</div>
<div
    id="collapseOne"
    class="accordion-body collapse"
    data-toggle="false"
    >
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>
11
aqm

Il suffit d’ajouter la classe "show" à la classe de l’élément réducteur. bootstrap utilisera js de manière dynamique pour la supprimer afin de la réduire et de la montrer.

1
Tonui

Je viens d'ajouter la classe masquer à la div avant "card-body" et elle est masquée par défaut. 

<div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">

0
Igor Pavlenko