Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: Accordion Collapse stopped working with Bootstrap 2.0.3

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.com/#faq

The following code example is also on 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!

like image 583
Mark Rummel Avatar asked Jun 02 '12 02:06

Mark Rummel


People also ask

How do you collapse in Bootstrap 3?

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.

How do I keep my Bootstrap accordion open?

Always open Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.

What is the difference between collapse and accordion?

In bootstrap context wise, accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1, <div id="accordion" role="tablist"> , this is where the data-parent refers to. on line 2 <div class="card"> , we are using a card class, to show the card effect.

How do I know if Bootstrap accordion is open?

Bootstrap uses the aria-expanded attribute to show true or false if the region is collapsed or not. For anyone struggling with getting this to work; make sure you initialise the aria-expanded attribute to true or false in the HTML!


1 Answers

I see two options

  • use divs instead of table (go for the example http://twitter.github.com/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')

like image 78
maxmax Avatar answered Oct 29 '22 23:10

maxmax