Close one div when the other opens - Bootstrap
Solution 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.
Solution 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');
});
![150GritSandpaper](https://i.stack.imgur.com/hVpdF.jpg?s=256&g=1)
150GritSandpaper
Just a website developer - Mostly Joomla and HTML5
Updated on June 28, 2022Comments
-
150GritSandpaper almost 2 years
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 Bootstrap Data Attributes to accomplish this.
I have studied this page: http://getbootstrap.com/2.3.2/javascript.html#collapse
Thank you, Mike
-
150GritSandpaper about 10 yearsNicolai, I added your javascript to my page and added the new data-attribute to my button like you suggested and it worked like a charm <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#coolsculpting-arms" data-collapse-group="myDivs" style="margin-bottom:25px;">Learn More</button>
-
Fateh Khalsa over 7 yearsWorks perfectly! I found this to be a little more clearly and well written than the selected answer above. I assume it's based on that however, so I've upvoted both!
-
AnBisw about 7 years@afemath i tried your solution as
<div id="prod" class="collapse" style="height: 0px;" data-collapse-group="myDiv1">
and so on for a bunch of<div>
but can't seem to make it work. It's as if the script isn't loading at all...any idea? -
afemath about 7 yearsHere is an example - jsbin.com/tuhewamodu/1/edit?html,js,output