I have done research and to my knowledge data-target is what i need to close down the div, if the other open. In other words I need to open one div at a time. But i think i am unable to do that or cannot make sense on how to open one accordion at a time. Here is my code
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> You can use the Bootstrap Collapse API to watch for show.bs.collapse event triggers firing, then closing other collapse elements using the collapse('hide') method. The code for that would be as follows:
$(document).ready(function(){ var $panels = $('.panel-collapse'); $panels.on('show.bs.collapse', function(){ $panels.not(this).collapse('hide'); }); }); Here is an updated codepen also with some updated HTML.
Note, I'd recommend to never have a row directly within another row, there simply isn't any need for it and can create issues with the grid. Also, you may not need as many container classes as you have, you can simply have the wrapping containers to effectively contain the contents.
Hopefully this helps!
$panel.on do?.panel-collapse items so that they don't get queried/retrieved each time the event fires. jQuery on() is a method for attaching events to jQuery elements. on() is needed in this case because we are looking for a custom Bootstrap event rather than something standard like click() or focus(). In this case it will listen for any show.bs.collapse events (when panel open is triggered) then execute the anonymous function executing hide on other collapse elements.