引導程序崩潰部分並用一個按鈕展開另一個

我有一堆邏輯上分隔的HTML字段，例如：一半字段位於：div id =「general」另一半駐留在：div id =「先進的」引導程序崩潰部分並用一個按鈕展開另一個

我試圖實現（和失敗）如下：

在一般DIV的字段中顯示（默認）。顯示標題爲「高級」的按鈕。高級div中的字段將被隱藏。

當點擊這個按鈕，應該出現以下情況：

常規部分摺疊隱藏所有它的領域
Advanced部分展開顯示它的所有領域
按鈕標題更改爲「常規」。

後續點擊切換上述內容。

E.g.在下一次單擊時，現在隱藏了高級部分，現在顯示了常規部分，並且按鈕標題更改爲「高級」

注意：這看起來微不足道，但對於Web前端來說是新的，我無法獲取此容易。如果我的div部分不正確，請將其取消。我懷疑我在正確的軌道上，只需要一些jQuery代碼來摺疊和展開div。

下面是我的嘗試：

我使用的引導崩潰插件與手風琴標記，但是這不是我想要的。它雖然接近，但每個部分都有一個標題/按鈕。我想要一個標題/按鈕以相反的方式切換每個部分。
我使用了不帶手風琴標記的Bootstrap摺疊插件，但是與嘗試1 - 兩個按鈕的結果相同。
我試着用jQuery來動態地做到這一點，但無法獲得正確的邏輯（或語法）。

我使用的是引導，但很高興去與jQuery（或JavaScript）解決方案，如果它不能做到完全的引導與崩潰插件。

來源

2014-11-05 Thomas Veil

檢查的jsfiddle： - JSFiddle

$("#advanced").addClass('hide'); 
    $(".button").click(function(){ 
    $("#advanced").toggleClass('hide'); 
    $("#general").toggleClass('hide'); 
    if($(this).attr("value") == "Advanced"){ 
    $(this).attr("value","General"); 
    } 
else if($(this).attr("value") == "General"){ 
    $(this).attr("value","Advanced"); 
} 
});

來源

2014-11-05 06:19:36 Rushee

你可以使用jquery通過切換元素上的類來決定顯示哪些字段。

爲例如採取外部div，並把普通和先進的div內div內，並只顯示基於外部div類，如advanced使用CSS的字段。並綁定一個按鈕來切換外部div上的類。

結帳的jsfiddle這裏：http://jsfiddle.net/eqhw2mxx/2/

來源

2014-11-05 05:56:32

更新的jsfiddle鏈接 – 2014-11-05 05:58:02

引導程序崩潰部分並用一個按鈕展開另一個

回答

相關問題