Twitter Bootstrap Collapse / Responsive Nav not working in FF / Chrome

Question

I made a simple responsive page using Twitter Bootstrap: http://jsfiddle.net/5YNmm/3/

The responsive Nav and any collapse toggles work only once in FF and Chrome. In IE they work perfectly.

The collapse example is copied from the bootstrap site:

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Press me to toggle</button>
<div id="demo" class="collapse in"> Collapsible Content, initially shown </div>

Since i don't include any other js, it shouldn't be the error here Bootstrap nav-collapse toggles once or here twitter-bootstrap Collapse stops working after first click , where $.support.transition gets overridden by another library.

Many thanks in advance for any advice!

Answer 1

Its something in the css files. All I have simply done in this fiddle update is to remove your two css files (that obviously weren't loading on the fiddle)

<link rel="stylesheet" type="text/css" href="./bootstrap_files/stylesheet_427bb03fe1.css" media="all">
<link rel="stylesheet" type="text/css" href="./bootstrap_files/frontend.css" media="all">

and replace it with the bootstrap CDN hosted CSS file

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">

and it collapses and expands on chrome and firefox fine now. Fiddle Link here: http://jsfiddle.net/5YNmm/6/

Without any access to the css files I couldn't tell you more - but hopefully this should point you in the right direction!!