How to implement twitter bootstrap accordion?

Question

I'm trying to implement the twitter bootstrap collapse plugin (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse) and I can't seem to get it working. Thinking it was something wrong with my development environment, I set up a JSfiddle and I'm still getting the same issues. Here's the jsfiddle:

http://jsfiddle.net/qdqrT/1/

Here is the HTML which was copied directly from the bootstrap example.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

The CSS and javscript were taken directly from the bootstrap customize page, with only the collapse CSS and JS, and the trasition JS (which is a dependency for the collapse plugin).

Anyone know why this is broken?

Answer 1

I got it working. I think you might not be including all the required resources.

I ended up including a hosted version of bootstrap CSS and JS from BootstrapCDN

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Here is the working version: http://jsfiddle.net/qdqrT/3/