Menu
The following accordion code is not working properly for me.
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note1">
Foo
</a>
</div>
<div class="accordion-body collapse" id="note1">
<div class="accordion-inner">
<pre>Foo body</pre>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note2">
Bar
</a>
</div>
<div class="accordion-body collapse" id="note2">
<div class="accordion-inner">
<pre>Bar body</pre>
</div>
</div>
</div>
</div>
It displays and the items expand properly, but the items won't collapse. When I click an open item, it collapses briefly, and then expands again. I've seen this behavior on bootstrap versions 2.1.0 and 2.1.1. Also, I'm using JQuery 1.7.2 and 1.8.2 and viewing in Chrome 22.
288
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.
You can determine whether an element is collapsed or not by using the :visible and :hidden selectors. }, "slow" );
Expand or collapse accordion items on checkbox click in Angular Accordion component. By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header. You can also expand or collapse the accordion items through external button click.
The problem ended up being that I had accidentally included all my javascript script files twice. Removing the duplicate fixed everything. I don't know how common this mistake is, but if someone else has this problem in the future, then it might be helpful to have this answer rather than just deleting the question.
75
I had the same problem. The problem was that I loaded jQuery after bootstrap.
36
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
