Search code examples
jqueryaccordionthickbox

Jquery accordion and thickbox clash


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


Solution

  • 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();