使用Bootstrap3折叠div

Question

I have four buttons in my page, and on the click of each one of them , it should reveal a div, and should close the open divs.

I have got to open the corresponding div, but it does not close the ones which are open.

Here is the code that I have done so far http://www.bootply.com/DWw9JbGFex

Thanks for your help in advance.

Answer 1

Binding to the collapse event and hiding the rest of the collapsible elements using jQuery will do the trick. See Boostrap javascript docs

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

See the updated bootply
http://www.bootply.com/5oGRhtqdfw

Answer 2

Simple hide/show using 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);
    });
});