CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
localhost
localhost

Reputation: 861

Accordion not closing other open divs

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">

Upvotes: 0

Views: 563

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38757

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!

Upvotes: 2

Related Questions