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 functionality stops working.

It still opens and closes the target div, but it won't automatically close an open target div when another td with data-toggle="collapse" is clicked.

You can see it not working with 2.0.3 here:

The following code example is also on JSFiddle at /.

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

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 functionality stops working.

It still opens and closes the target div, but it won't automatically close an open target div when another td with data-toggle="collapse" is clicked.

You can see it not working with 2.0.3 here: http://chooserealtoday./#faq

The following code example is also on JSFiddle at http://jsfiddle/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!

• javascript
• twitter-bootstrap
• html-table
• accordion

3 Answers 3

I see two options

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

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

by the 2.0.2 version :

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

You can solve this without modifying the Bootstrap files: just throw in the .accordion-group class.

Reference

I wrote this extension to allow using collapse with a table. It allows you to specify the selector used to find active siblings in a collapse group.

bootstrap-collapse-activeselector