How to implement tweeter-bootstrap-accordion?

Question

I am trying to implement the twatt bootstrap collapse plugin ( http://twitter.imtqy.com/bootstrap/2.3.2/javascript.html#collapse ) and I cannot get it to work. Thinking that something was wrong in my development environment, I created JSfiddle and I am still having the same problems. Here's the jsfiddle:

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

Here is the HTML that 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> 

CSS and javscript were taken directly from the bootstrap setup page only with the collapse of CSS and JS, as well as using trasition JS (which is dependent on the merge plugin).

Does anyone know why this is broken?

Answer 1

I have earned. I think you may not include all the necessary 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 were included.

There was no need to use the bootstrap version of the CDN (but you can if you want).

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 understand that the question is old, but I think my answer is more relevant than the accepted answer, and I hope it helps someone)