Bootstrap: Accordion Collapse has stopped working with Bootstrap 2.0.3

Question

My accordion using data-toggle="collapse" and data-parent="#selector" works fine with Bootstrap 2.0.2, but when I switch to 2.0.3, the accordion function stops working.

It still opens and closes the target div , but does not automatically close the open target div when another td with data-toggle="collapse" .

You can see that it does not work with 2.0.3: http://chooserealtoday.com/#faq

The following code example is also located on the JSFiddle at http://jsfiddle.net/N7MN9/3/ .

 <table id="faq-table" class="table table-bordered"> <tr> <td class="question" data-toggle="collapse" data-target="#answer1" data-parent="#faq-table"> <p><strong>What is your name?</strong></p> <div id="answer1" class="answer collapse"> <p>Mark Rummel</p> </div> </td> </tr> <tr> <td class="question" data-toggle="collapse" data-target="#answer2" data-parent="#faq-table"> <p><strong>What is your favorite color?</strong></p> <div id="answer2" class="answer collapse"> <p>Blue, no yellow.</p> </div> </td> </tr> </table> 

Thanks for any help you can offer on this!

Answer 1

I see two options

• use divs instead of tables (go to the example http://twitter.github.com/bootstrap/javascript.html#collapse )
• modify bootstrap.js and replace:

actives = this.$parent && this.$parent.find('> .accordion-group > .in')

in version 2.0.2:

actives = this.$parent && this.$parent.find('.in')

Answer 2

You can solve this problem without changing the Bootstrap files: just enter the .accordion-group class.

Link

Answer 3

I wrote this extension to resolve a table crash. It allows you to specify the selector used to search for active siblings in the drop group.

bootstrap-collapse-activeselector