Puis-je spécifier plusieurs cibles de données pour Twitter Bootstrap?

J'aimerais cible deux divs pour développer lorsque l'on clique sur un seul déclencheur? Est-ce possible?

source d'informationauteur mtndan

  1. 55

    Vous pouvez simplement ajouter tous les identifiants séparés par des virgules dans les données-cible:

      <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
  data-toggle="collapse" data-target="#demo,#demo1,#demo2">Hide them all</button>
  2. 26

    Utiliser la même classe pour les deux divisions et de définir votre data-target selon cette. Donner votre div est aussi le même parent (ou une classe) et de définir data-parent selon ce.

    <button type="button" class="btn btn-danger" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
      simple collapsible
    </button>
    <div id="wrap">
    <div class="demo collapse">
    test1
    </div>
    <div class="demo collapse">
    test1
    </div>
    </div>
  3. 17

    De la Bootstrap 3 documentation:

    Les données de l'attribut cible accepte un sélecteur CSS pour appliquer l'effondrement.

    Par conséquent, vous pouvez utiliser une liste séparée par des virgules de id, sélecteur de classe etc. pour le data-target valeur d'attribut:

    <button class="btn btn-primary" type="button"
    data-toggle="collapse" data-target="#target1,#target2,#target3"
    aria-expanded="false" aria-controls="target1,target2,target3">

    Vous pouvez voir une vaste liste de sélecteurs CSS valide sur le w3schools site web.

  4. 6

    Si vous souhaitez masquer un élément et un autre (comme le bootstrap de l'accordéon, mais sans panneau) vous pouvez ajouter plusieurs cibles, mais aussi ajouter la classe "dans" pour avoir un élément étendu la charge!

    <div class="collapse text-center clearfix in" id="section1">
   <h1>This is section 1</h1>
   <p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
   <h1>Boo!!</h1>
   <p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>

    Démonstration en direct ici

  5. 2

    Les données cibles réponse n'a pas de travail pour moi. Cependant, vous pouvez utiliser JavaScript pour faire cela.

    Faire de votre bouton d'appel JavaScript comme:

    $('.collapse-class').collapse('toggle')

    Voir: https://getbootstrap.com/javascript/#via-javascript-3.