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?

Solution 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/

Solution 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)

Comments

[larkfofty]

This is great, thanks for the response. I'd rather not include the entire bootstrap framework only for the collapse function though. I'm a little confused as to why the customized bootstrap package isn't working.

[lightswitch05]

I would need to look at it more, but I think your version isn't working because you are missing some CSS rules that would apply, not because you are missing any javascript.

[grvsmth]

Yeah, I had this problem and it turns out I was using the wrong version of Bootstrap. Thanks!