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!
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.
Always open Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
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.
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!
I see two options
actives = this.$parent && this.$parent.find('> .accordion-group > .in')
by the 2.0.2 version :
actives = this.$parent && this.$parent.find('.in')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With