mightybyte
mightybyte

Reputation: 7282

Accordion doesn't collapse

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.

Upvotes: 10

Views: 13874

Answers (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.

Upvotes: 1

charlie
charlie

Reputation: 77

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

Upvotes: 3

mightybyte
mightybyte

Reputation: 7282

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.

Upvotes: 33

Related Questions