如何在可摺疊的內容面板中創建按鈕並使內容可見並隱藏在其中？

Question

我已經完成了可從此鏈接http://jqueryui.com/accordion/摺疊內容面板，我需要什麼？在section1內容面板中，只有兩個按鈕（是和否）。所以當我點擊yes按鈕時，這兩個按鈕就消失了，一些內容應該被加載到section1的內容面板中。如何做這個任務？這是用twitter引導建立的。

Answer 1

創建兩個按鈕，下面的代碼是針對一個按鈕的，但您可以制定其餘的按鈕，並按照剩餘的按鈕進行操作。

$('.yesbutton').click(function({ 
    $(this).hide(); 
    $('.nobutton').hide(); 
    $('.supersneakyhidingcontent').show(); 
}); 

Answer 2

在您的按鈕點擊事件中，你可以做BeatAlex與無論是從模板和/或數據源動態加載的內容一起陳述：

$('.button').click(function({ 
    // hide buttons 

    // load content 
    $.ajax({ 
     url: '/controller/action', // path to controller or datasource 
     type: 'POST', 
     data: JSON.stringify(data), // data to pass to server (format as needed) 
     contentType: 'application/json;charset=utf-8' 
    }).done(function (data) {   // data is what your return from server 
     // execute code here to fill your selector 
    }).fail(function (data) { 
     // take action in case of failure 
    }); 
}); 

如果您加載數據動態的過程中，你可能希望將您的ajax調用包裝在全局函數中。我這樣做，並傳遞一個回調函數，我執行完成。這也允許我在失敗時向用戶提供更全局的錯誤表示。

另一個建議是我們使用引導程序，我真的很喜歡它，因爲它需要很多JQuery選擇器編寫的方法是使用Observables和MVVM。我們使用bootstrap完成此操作，並在使用Bootstrap的單頁應用程序中取得了巨大成功。我們正在使用Kendo UI Web的免費版本。希望這可以幫助。

Kendo UI Observable Framework | MVVM in Kendo UI Walkthrough