Jquery accordion and thickbox clash

Question

I am having a problem using thickbox and accordion on the same page ie none of them work. I have checked that they both use the latest version of jquery. Below are my includes. There are no other jscript files included. I am using this on a wordpress template if this can cause an issue.

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/foxintouch/javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/foxintouch/javascript/jquery.accordion-1.2.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/foxintouch/javascript/jquery.accordion-1.2.2.source.js"></script>

<!-- thickbox -->

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/themes/foxintouch/javascript/thickbox/thickbox.js"></script>
<link rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/themes/foxintouch/javascript/thickbox/thickbox.css" type="text/css" media="screen" />

Here is the call to accordion:

$(document).ready(function () {
 $('#sidebar ul').accordion();
 });

The url to my site is http://clients.bionic-comms.co.uk/fox/foxintouch-wp/issue/13/wesco-new-range/ Any help would be much appreciated. Thanks

Answer 1

I'm not sure why you're using the noConflict function on your site - this is intended to disable the $ shortcut in jQuery so it can be used with conflicting libraries like Prototype. Since your site only seems to be using jQuery based code, you don't need this.

Having the $ shortcut disabled is causing a fatal error in the code for Thickbox, which is in turn crashing the JS for the entire page.

Try getting rid of the noConflict code and just calling the accordian function directly, like so:

 $(document).ready(function () {
     $('#sidebar ul').accordion();
 });

Also, you shouldn't be including both jquery.accordion-1.2.2.js and jquery.accordion-1.2.2.source.js, just use the compressed version jquery.accordion-1.2.2.js by itself.

Answer 2

Your coded included references to two versions of jquery library. The first one (jquery-1.3.2.min.js) was extended with the accordion plugin but then it was overwritten by the second library (jquery.js).

This broke your $('#sidebar ul').accordion(); code because the second jquery library did not contain a definition for the accordion function (Only the first jquery library was extended with the accordion plugin).

Once you removed the second jquery library the thickbox stopped working because thickbox 3.1 does not support jQuery 1.3+ but this can be fixed easily by changing a single line in thickbox.js from:

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

to

TB_TempArray = $("a[rel="+imageGroup+"]").get();