使用Bootstrap3折疊div

Question

我的頁面上有四個按鈕，單擊每個按鈕，它應該顯示一個div，並應該關閉打開的div。

我必須打開相應的div，但它不會關閉打開的div。

這是到目前為止我完成的代碼http://www.bootply.com/DWw9JbGFex

感謝您的幫助。

Answer 1

綁定到崩潰事件並使用jQuery隱藏其余可折疊元素將達到目的。 參見Boostrap javascript文檔

var $sharegroup = $('#sharegroup');
$sharegroup.on('show.bs.collapse','.collapse', function() {
    $sharegroup.find('.collapse.in').collapse('hide');
});

查看更新的啟動
http://www.bootply.com/5oGRhtqdfw

Answer 2

使用jquery / bootstrap進行簡單的隱藏/顯示：

的HTML

        <button type="button" class="btn btn-primary div-toggler" name="div1">Expose Div 1</button>
        <button type="button" class="btn btn-primary div-toggler" name="div2">Expose Div 2</button>
        <button type="button" class="btn btn-primary div-toggler" name="div3">Expose Div 3</button>
        <button type="button" class="btn btn-primary div-toggler" name="div4">Expose Div 4</button>

        <div id="div1" class="target-div" style="display: none;" >Div 1</div>
        <div id="div2" class="target-div" style="display: none;" >Div 2</div>
        <div id="div3" class="target-div" style="display: none;" >Div 3</div>
        <div id="div4" class="target-div" style="display: none;" >Div 4</div>

的JavaScript

$(document).ready(function () {
    $('.div-toggler').click(function (e) {
        var btnName = $(e.currentTarget).prop('name');
        $('.target-div').hide();
        $('#' + btnName).fadeIn(300);
    });
});