CSS Collapsible Gruppen - Bootstrap

Question

Ich benutze Bootstrap zusammenklappbare Schaltflächengruppe. Ich möchte nur eine einzige Gruppenbox gleichzeitig sehen. Ich habe eine Funktion in js gemacht, um die "in" -Klasse zu entfernen und die aria-expanded-Anweisung zu ändern, aber ich denke, das ist nutzlos, da Leute daten-parent = "# myGroup" verwenden.

Scheinbar Daten-Eltern = "# myGroup" wird nicht für mich aus einem Grund arbeiten.

Ich habe versucht, Daten-Eltern auf einzelnes Element und auf beiden Schaltflächen und Kollaps-Gruppe und noch kann es nicht funktionieren.

In dieser Geige können Sie sehen, dass mehrere Gruppen angezeigt werden können. Ich möchte, dass die anderen sich verstecken, wenn ich einen Knopf drücke.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<p> 
 
    <button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup"> 
 
    A 
 
    </button> 
 

 
    <button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup"> 
 
    B 
 
    </button> 
 

 
    <button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup"> 
 
    C 
 
    </button> 
 

 
     <button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup"> 
 
    D 
 
    </button> 
 
</p> 
 

 

 
<div class="collapse" id="AA" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
    </div> 
 
</div> 
 

 

 
<div class="collapse" id="BB" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
bla bla bla 
 
    </div> 
 
</div> 
 

 

 

 

 
<div class="collapse" id="CC" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
    </div> 
 
    </div> 
 

 

 

 
<div class="collapse" id="DD" data-parent="#myGroup"> 
 
    <div class="card card-block"> 
 
    bla bla bla 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

Answer 1

Dies funktioniert.

http://plnkr.co/edit/HlrIvDW71JSVemkbhejy?p=preview

<div id="container"> 
    <div class="panel"> 
    <p> 
     <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container"> 
      A 
     </button> 
     <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container"> 
      B 
     </button> 
    </p> 

    <div class="collapse" id="AA"> 
     <div class="card card-block"> 
      bla bla bla A 
     </div> 
    </div> 

    <div class="collapse" id="BB"> 
     <div class="card card-block"> 
     bla bla bla B 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

Das ist nicht das, was Sie wollen. Bootstrap hat diese Option nicht.

Sie haben 3 Optionen:

1. Verwenden Akkordeon von Bootstrap ->http://getbootstrap.com/javascript/#collapse
2. Verwenden Tabs von Bootstrap ->http://getbootstrap.com/javascript/#tabs (Dies ist das beste, wenn Sie nicht programmieren möchten Sie gerade benötigen. um die Registerkartenstile wie Knöpfe zu ändern.)
3. Programm es selbst.