Close one div when the other opens - Bootstrap

Question

I\'m using the bootstrap native collapse functionality Bootstrap: collapse.js v3.0.2 to open div\'s when a button is pressed. It works great but I would like one div to clos

Answer 1

As I know you can't achieve what you want with Bootstrap data attributes.

So you can just add custom data attribute and add some custom javascript that will handle it:

I used the following data-attribute: data-collapse-group and the following javascript:

$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});

Working example in jsFiddle based on your page.

Answer 2

This will work for different groups of collapse elements without having to add any more js.

Just add the data attribute data-collapse-group, with an appropriate value, to the elements in your group that expand and collapse, not the button, and add the following js.

$("[data-collapse-group]").on('show.bs.collapse', function () {
  var $this = $(this);
  var thisCollapseAttr = $this.attr('data-collapse-group');
  $("[data-collapse-group='" + thisCollapseAttr + "']").not($this).collapse('hide');
});