Accordion doesn't collapse

Question

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.

Answer 1

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.

Answer 2

I had the same problem. The problem was that I loaded jQuery after bootstrap.

Answer 3

I had a similar silly problem. I forgot to add the script tags to include Bootstrap JS functionality... Make sure you include the Bootstrap CSS files ( link ) and the JS files ( link ). You actually do need both.