You use jQuery and Prototype at the same time without jQuery.noConflict() . After
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0/prototype.js"></script>
this line caused a javascript error:
$(window).load(function(){
Revised fiddle: http://fiddle.jshell.net/ymbsr/5/ - open http://fiddle.jshell.net/ymbsr/5/show/ in different browsers.
PS
After removing the jQuery / Prototype conflict, I see that the transition to the harmony of Chrome 21 and Opera 12.02 never ends (in bootstrap-collapse.js Collapse.transition transition is triggered, but complete() never called). Further calls to Collapse.show()/hide() on the same element exit after if (this.transitioning) return .
In Firefox 15.0.1, the accordion works great.
PPS
This strange behavior is the result of two features:
this.$element.trigger('hide') (in Collapse#transition() ) tries to call $element.hide() if the hide() method is present in the element:
Note. For simple objects and DOM objects, if the event triggered by the name matches the property name of the object, jQuery will try to invoke the property as a method if the event.preventDefault () event handler is not called. If this behavior is not desired, use .triggerHandler ().
With a prototype in every browser that supports HTML element prototype elements, $element will definitely have a hide() method that actually hides the element by setting element.style.display = 'none' .
In current versions of the Chrome and Opera transition completion events (one of webkitTransitionEnd , oTransitionEnd , oTransitionEnd ) will not fire if the element is hidden (has a display: none style). Firefox has successfully completed the transition, but may also not fire the event under certain circumstances :
Note. The transition event does not fire if the transition is interrupted because the value of the animation property changes until the transition is completed.
How to fix it:
Change the error for bootstrap-collapse.js - it should not rely only on the end of transition event
Error file for bootstrap-collapse.js - the hide event intersects with other frameworks (at least with Prototype, but any other prototypes of elements expanding the frames may be affected).
Temporarily copy Collapse#transition() from bootstrap-collapse.js , as in http://fiddle.jshell.net/ymbsr/7/ , either disable the event trigger or change the event names.
jQuery.fn.collapse.Constructor.prototype.transition = function (method, startEvent, completeEvent) { var that = this , complete = function () { if (startEvent.type == 'show') that.reset(); that.transitioning = 0; that.$element.trigger(completeEvent); } //this.$element.trigger(startEvent); //if (startEvent.isDefaultPrevented()) return; this.transitioning = 1; this.$element[method]('in'); (jQuery.support.transition && this.$element.hasClass('collapse')) ? this.$element.one(jQuery.support.transition.end, complete) : complete(); };