web-dev-qa-db-fra.com

Comment gardez-vous plusieurs fermetures ouvertes dans Bootstrap 3?

Bootstrap ferme normalement les autres fermetures lorsque vous cliquez dessus pour l'ouvrir.

Existe-t-il une option ou un hack pour faire en sorte que les fermetures restent ouvertes à moins qu'elles ne soient fermées explicitement sans changer l'apparence et la disposition du groupe de panneaux?

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
25
trusktr

Mise à jour 2018

Bootstrap 4

Comment faites-vous pour Twitter Bootstrap Accordéon garder un groupe ouvert?

Bootstrap 3

Vous pouvez simplement supprimer le data-parent attribut qui est normalement utilisé dans le balisage accordéon .

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
     ...

http://bootply.com/12784

74
Zim

Voir cette démo: http://plnkr.co/edit/OxbVII?p=preview

Idée:

Ajoutez simplement data-toggle="collapse" et un data-target à l'élément, pour attribuer automatiquement le contrôle d'un élément réductible. Le data-target l'attribut accepte un sélecteur CSS auquel appliquer le collapse. Assurez-vous d'ajouter la classe collapse à l'élément réductible. Si vous souhaitez qu'il s'ouvre par défaut, ajoutez la classe supplémentaire in.

6
Arpit Srivastava

Bootstrap 4

PAS BESOIN DE JAVASCRIPT

peut implémenter de nombreux div de id #accordion{{$i}} chaque accordéon n'ayant que 1 child que référençant 1 son parent

    <div class=""
         id="accordion{{$i}}">

        <h3 class="" data-toggle="collapse"
            data-target="#collapse{{$i}}"
            aria-expanded="true"
            aria-controls="collapse{{$i}}" class="mb-0">
            Hai Im the clickable
        </h3>

        <div id="collapse{{$i}}"
             class="collapse"
             aria-labelledby="heading{{$i}}"
             data-parent="#accordion{{$i}}">
            <p>Hai Im the collapsible content</p>
        </div>
    </div>
0
david valentino