Twitter Bootstrap 2, collapse-nav

Question

With Twitter Bootstrap 2, how do get links working within collapse-nav:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/index.html">Hubsphere - Controller</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="">
            <a href="./index.html">Overview</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>    

i have jquery included, and the bootstrap-collapse.js file.

I have tried calling $('.nav-collapse').collapse() but this just opens the collapse area and dose not activate the button. which is what i expected as it should just work with markup.

thanks

Answer 1

I was a bit curious to see if this problem still occurs with bootstrap 2.0.4

In fact, it makes no sense to include both bootstrap.js and bootstrap-collapse.js since bootstrap.js includes bootstrap-collapse.js

only boostrap-collapse.js http://jsfiddle.net/baptme/YWUmb/6/

It works pefectly fine as expected.

both boostrap.js & boostrap-collapse.js: http://jsfiddle.net/baptme/YWUmb/5/

If you click on the collapse button for the first time, the div opens and closes immediately. (I think it's because the plugin is declared twice).

And then it works ok.

This issue is specific to the early version of twitter boostrap (2.0.0) but it has been dealt with or no longer occuring due to a change in the plugin structure.

Answer 2

Ok so my problem was that i was including bootstrap.js and the bootstrap-collapse.js in the same file, i assumed that bootstrap.js was needed, and then when it did not work i included bootstrap-collapse.js.

It is now obvious to me, but bootstrap.js is all the bootstrap js rolled up. Which is nice...