使用摺疊/手風琴製作一個可切換的div

Question

在Bootstrap（v3）中可以有兩個div可以切換，所以一個div默認顯示，一個按鈕在兩者之間切換，所以一個div始終顯示？

這感覺就像「摺疊」和/或「手風琴」應該是能夠做到這一點，但...

「收起」不允許父元素，兩個之間切換...

「Accordion」允許隱藏所有面板。

同樣的事情可以用一點JQuery來完成，但我想知道是否使用data- *屬性可能會讓我避免任何JS。另外，我想盡可能使用標準的Bootstrap類。

Answer 1

您可以使用toggle摺疊方法。

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> 

正如你看到的第一個是開放的（有in類）。然後用JavaScript中，我們可以切換他們

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

注：fade類是可選的，但看起來它更好，在我看來。

fiddle

更新沒有自定義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