I created a fiddle for Collapse feature of Twitter Bootstrap using the markup from the demos on your page that works: /

Then once, I add in a reference to prototypejs collapse functionality stops working on each accordian group after clicking through it a couple of times. / I'm not sure what the issue is or how to correct it.

Is this a bootstrap issue or is there a way to get around this and have these two js libraries exist on the same page?

I have tried jQuery noConflict with no success, but any help is appreciated. If you can send me back a working fiddle that would be great...or any insight.

Thanks. -John

I created a fiddle for Collapse feature of Twitter Bootstrap using the markup from the demos on your page that works: http://jsfiddle/Rymd7/1/

Then once, I add in a reference to prototypejs collapse functionality stops working on each accordian group after clicking through it a couple of times. http://jsfiddle/p5SAy/1/ I'm not sure what the issue is or how to correct it.

Is this a bootstrap issue or is there a way to get around this and have these two js libraries exist on the same page?

I have tried jQuery noConflict with no success, but any help is appreciated. If you can send me back a working fiddle that would be great...or any insight.

Thanks. -John

• javascript
• jquery
• twitter-bootstrap
• prototypejs

• These two fiddles are identical. Did you mean to do that? – davehale23 Commented Oct 3, 2012 at 19:35
• github./twitter/bootstrap/issues/5403 - is it yours? – Victor Commented Oct 5, 2012 at 8:49
• @davehale23 The two fiddles are different. As posed in the original question, the 2nd one has a reference to prototype.js. You will see it under managed resources. – user1718100 Commented Oct 5, 2012 at 16:07
• @Victor Yes that is my question on github. – user1718100 Commented Oct 5, 2012 at 16:07

2 Answers 2

You are using jQuery and Prototype simultaneously without jQuery.noConflict(). After

<script type='text/javascript' src='http://code.jquery./jquery-1.7.js'></script>
<script type='text/javascript' src="http://ajax.googleapis./ajax/libs/prototype/1.7.0/prototype.js"></script>

this line was causing javascript error:

$(window).load(function(){

Revised fiddle: http://fiddle.jshell/ymbsr/5/ - open http://fiddle.jshell/ymbsr/5/show/ in different browsers.

P.S.

After removing jQuery/Prototype conflict I can see that ih Chrome 21 and Opera 12.02 accordion transition never ends (in bootstrap-collapse.js Collapse.transition initiates transition but plete() is never called). Further invocations of Collapse.show()/hide() on the same element are exiting after if (this.transitioning) return.

In Firefox 15.0.1 accordion works fine.

P.P.S.

This strange behavior is a consequence of two features:

1. this.$element.trigger('hide') (in Collapse#transition()) tries to invoke $element.hide() if method hide() is present in element - that's by design:

   Note: For both plain objects and DOM objects, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls event.preventDefault(). If this behavior is not desired, use .triggerHandler() instead.

   With Prototype in each browser supporting HTML element prototype extensions $element will definitely have hide() method, which actually hides element via setting element.style.display = 'none'.

2. In current versions of Chrome and Opera transition end event (one of webkitTransitionEnd, oTransitionEnd, otransitionend) will not fire if element is hidden (has display: none style). Firefox ends its transition more successfully, but also may not fire event under some circumstances:

   Note: The "transitionend" event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is pleted.

How to fix it:

1. File a bug for bootstrap-collapse.js - it shouldn't rely only on transition end event

2. File a bug for bootstrap-collapse.js - its hide event intersects with other frameworks (at least with Prototype, but any other framework extending element prototypes may be affected).

3. Temporarily patch Collapse#transition() from bootstrap-collapse.js as in http://fiddle.jshell/ymbsr/7/ - either disable event triggering or change event names.

   jQuery.fn.collapse.Constructor.prototype.transition = function (method, startEvent, pleteEvent) {
     var that = this
       , plete = function () {
           if (startEvent.type == 'show') that.reset();
           that.transitioning = 0;
           that.$element.trigger(pleteEvent);
         }
     //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, plete) :
         plete();
   };
   

I am using Magento and have had bootstrap/ prototype problems for years. I tried all of the above without luck. Ha you will not believe what worked!

I moved prototype as one of the first scripts to be loaded and left all of the others to be loaded after. That worked for me. I dont know why I didnt try the earlier.