Verwenden von Collapse/Akkordeon um einen umschaltbaren div zu machen

Question

In Bootstrap (v3) ist es möglich, zwei divs zu haben, die einfach umschaltbar sind, also wird standardmäßig ein div angezeigt und ein Button schaltet zwischen den beiden um gezeigt?

Es fühlt sich an wie „Kollaps“ und/oder „Akkordeon“ sollte in der Lage sein, dies zu tun, aber ...

„Collapse“ erlaubt keine übergeordnete Elemente, zwischen den beiden zu wechseln und ...

Mit "Accordion" können alle Panels ausgeblendet werden.

Die gleiche Sache kann mit ein bisschen JQuery erreicht werden, aber ich frage mich, ob einige Verwendung der Daten * Attribute mir erlauben können, JS zu vermeiden. Außerdem möchte ich Standard-Bootstrap-Klassen so oft wie möglich verwenden.

Answer 1

Sie können die toggle Methode des Minimierens verwenden.

HTML

<button class="btn btn-primary" type="button" id="btn"> 
    Button 
</button> 

<div id="grouped"> 
    <div class="collapse in fade" id="1"> 
     1. Suspendisse non nisl sit amet 
    </div> 
    <div class="collapse fade" id="2"> 
     2. Praesent congue erat at massa 
    </div> 
</div> 

Wie Sie sehen erste offen ist (hat Klasse in). Dann mit Javascript können wir sie wechseln

$("#btn").on("click", function(){ 
    $("#grouped .collapse").collapse('toggle'); 
}); 

Hinweis: fade Klasse ist optional, aber sieht besser mit ihm, meiner Meinung nach.

fiddle

aktualisieren ohne benutzerdefinierten JavaScript

<div id="grouped"> 
    <button class="btn btn-primary" type="button" id="btn" data-toggle="collapse" data-target=".collapse"> 
    Button 
    </button> 

    <div class="collapse in fade" id="1"> 
     1. Suspendisse non nisl sit amet 
    </div> 
    <div class="collapse fade" id="2"> 
     2. Praesent congue erat at massa 
    </div> 
</div> 

fiddle