The bootstrap pivot only switches once

Question

I am pulling my hair out again here ... so my bootstrap crashes work with jsFiddle ( http://jsfiddle.net/rasreye/xtPtH/1/ ) - but when I add to my site it only crashes once .. . (i.e., click on the title that it opens, click again, it will close, click again and NOTHING)

Here is a link to the actual page with the problem: http://www.urbanoffering.com/custom-optimizations

Heres the JS

<script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(function() { $('.accordion').on('show', function (e) { $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active'); }); $('.accordion').on('hide', function (e) { $(this).find('.accordion-toggle').not($(e.target)).removeClass('active'); }); }); });//]]> </script> <script> $(document).ready(function () { location.hash && $(location.hash + '.collapse').collapse('show'); }); </script> 

And HTML

 <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle active" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> <h2>Shirt Collars</h2> </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> <ul> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard.jpg" alt="Standard Collar" width="225" height="225" /> <h3>Standard</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_buttons_1.jpg" alt="Standard with Button Collar" width="225" height="225" /> <h3>Standard with Buttons</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/small_standard.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Small Standard</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/small_standard_buttons.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Small Standard with Buttons</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Standard Round</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/cutaway.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Cutaway</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/cutaway_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Cutaway Round</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_double_buttons.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Standard with Double Buttons</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/Barrel.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Barrel</h3> </li> <li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/tuxedo.jpg" alt="" width="225" height="225" /> <h3>Tuxedo</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> <h2>Shirt Cuffs</h2> </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_round.jpg" alt="Single Round" width="225" height="225" /> <h3>Single Round</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_notch.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Single Notch</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_edge.jpg" alt="Single Edge" width="225" height="225" /> <h3>Single Edge</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Double Round</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_notch.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>Double Notch</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_edge.jpg" alt="Double Edge" width="225" height="225" /> <h3>Double Edge</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" /> <h3>French Round</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_notch.jpg" alt="French Notch" width="225" height="225" /> <h3>French Notch</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_edge.jpg" alt="French Edge" width="225" height="225" /> <h3>French Edge</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> <h2>Shirt Pleats</h2> </a> </div> <div id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_wide.jpg" alt="Double Wide" width="225" height="225" /> <h3>Double Wide</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_middle.jpg" alt="Double Dibble" width="225" height="225" /> <h3>Double Middle</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/darts.jpg" alt="Darts" width="225" height="225" /> <h3>Darts</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"> <h2>Suit Buttons</h2> </a> </div> <div id="collapseFour" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons.png" alt="Double Wide" width="225" height="225" /> <h3>One Button</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons_two.png" alt="Double Dibble" width="225" height="225" /> <h3>Two Button</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons_three.png" alt="Darts" width="225" height="225" /> <h3>Three Button</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive"> <h2>Suit Lapels</h2> </a> </div> <div id="collapseFive" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/standard_notch.png" alt="Double Wide" width="225" height="225" /> <h3>Standard Notch</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/narrow_notch.png" alt="Double Dibble" width="225" height="225" /> <h3>Narrow Notch</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/peak_lapel.png" alt="Darts" width="225" height="225" /> <h3>Peak Lapel</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/shawl_lapel.png" alt="Darts" width="225" height="225" /> <h3>Shawl Lapel</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix"> <h2>Suit Details</h2> </a> </div> <div id="collapseSix" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pick_stitching.png" alt="Double Wide" width="225" height="225" /> <h3>Pick Stitching</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/functional_lapel.png" alt="Double Dibble" width="225" height="225" /> <h3>Functional Lapel</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/functional_sleeve.png" alt="Darts" width="225" height="225" /> <h3>Functional Sleeve Button Holes</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pen_pockets.png" alt="Darts" width="225" height="225" /> <h3>Pen Pocket</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSeven"> <h2>Suit Pockets</h2> </a> </div> <div id="collapseSeven" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/regular_pockets.png" alt="Double Wide" width="225" height="225" /> <h3>Regular Pockets</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/slanted_pockets.png" alt="Double Dibble" width="225" height="225" /> <h3>Slanted Pockets</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/regular_ticket_pocket.png" alt="Darts" width="225" height="225" /> <h3>Regular Pockets with Ticket Pocket</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/slanted_ticket_pockets.png" alt="Darts" width="225" height="225" /> <h3>Slanted Pockets with Ticket Pocket</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseEight"> <h2>Suit Vents</h2> </a> </div> <div id="collapseEight" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/no_vents.png" alt="Double Wide" width="225" height="225" /> <h3>No Vents</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/one_vent.png" alt="Double Dibble" width="225" height="225" /> <h3>One Vent</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/two_vents.png" alt="Darts" width="225" height="225" /> <h3>Two Vents</h3> </li> </ul> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseNine"> <h2>Suit Pant Pleats</h2> </a> </div> <div id="collapseNine" class="accordion-body collapse"> <div class="accordion-inner"> <ul> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/no_pant_pleat.png" alt="Double Wide" width="225" height="225" /> <h3>No Pant Pleats</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/one_pant_pleat.png" alt="Double Dibble" width="225" height="225" /> <h3>Single Pant Pleats</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_pant_pleat.png" alt="Darts" width="225" height="225" /> <h3>Double Pant Pleats</h3> </li> <li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pant_pleat_cuffs.png" alt="Darts" width="225" height="225" /> <h3>With Cuffs</h3> </li> </ul> </div> </div> </div> </div> 

Answer 1

I experienced this problem a while ago. This was caused by a conflict created by the old prototypeJS library. Our fix was to go into the bootstrap file, find the “Collapse” section, find the transition method in it, and change

 this.$element.trigger(startEvent) 

to

 this.$element.triggerHandler(startEvent) 

And, of course, the disadvantage is that you have to remember to add this code every time you upgrade the bootstrap to a newer version.

Answer 2

I had a problem with bxslider js conflict and in bootstrap js file I replace all $ element.trigger with $ element.triggerHandler and it worked.

Answer 3

I had an identical issue with Bootstrap 3.3.1 and Prototype 1.7 in the Magento build ...

Find a replacement for $ element.trigger with $ element.triggerHandler in the Bootstrap library that works like a charm.

Before you try, be sure to back up your Bootstrap library.

Answer 4

I had the same problem as caused by double inclusion of javascript files.

I did , including the files of my javascript library twice , when I deleted duplicates, it works fine.

Answer 5

I had the same problem today. My fix just updated bootstrap and jQuery to their latest version.

Answer 6

I had the same problem when using this jquery-ui effect, which highlights the binding target in a few seconds:

 $('a[href^="#"]').on('click', function () { var target = this.hash; $(target).effect("highlight", {}, 3000); }); 

I put something more specific as a selector:

 $('a[href^="#somethingSpecific"]') 

and everything returned to normal.

Answer 7

I ran into the same problem and it was solved when I updated bootstrap css and js files. Hope this helps someone.

Answer 8

I updated the theme of the old bootstrap, now everything is fine.