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 close when the other opens. Currently, as bootstrap designed it, a single button controls the toggling for the specific div. It is good if I wanted to have one button control one section, but I was wondering if there is a way to make a any button in my list of buttons, close any open div before opening its respective div. I have reviewed this code * Bootstrap: collapse.js v3.0.2 * in the bootstrap.js filebut can't figure our how to do what I want. Can someone point me in the right direction to help me determine what I need to do to get the functionality I'm looking for. ``` This is the URL to the page I'm developing where you can see the buttons working: http://23.229.158.126/orangecounty-coolsculpting.com/about-orange-county-dualsculpting.html ``` I don't know if I need to add more code to the file or if I can just call…

Accepted Answer

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.

Close one div when the other opens - Bootstrap

Solution

Problem