如何实现twitter bootstrap手风琴？

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/

Answer 2

I tried it with a newer version of bootstrap (3.3.4) and the code in the question worked when the correct files are included.

It wasn't necessary to use the CDN version of bootstrap (but you can if you wish).

I have bootstrap in a subdirectory and the following in my HTML:

<!-- Bootstrap CSS (put this in the header of your HTML file)-->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<!-- Bootstrap Javascript (put this at the end of your HTML file)-->
<script src="bootstrap/js/bootstrap.min.js"></script>

(I realise that the question is old, but I think my answer is more up to date than the accepted answer and hopefully it will help someone)