jQuery conflict?

Hi!

I've been struggling with a apparent jquery conflict at chefsconsortium.com. In Chrome the error displayed in the javascript console is: Uncaught TypeError: Object [object Object] has no method 'showHide' which points to $('.show_hide').showHide({. However the sliding panel still works, though in the IE and Firefox the sliding panel doesn't appear at all with the error: $(".show_hide").showHide is not a function
[Break On This Error] hideText: 'Close' // the button text to show when a div is open.

The conflict occurs whenever a background stretcher script is used: $('#thetheTopPanel').

Any help would be great!

 

For starters, here are the scripts in question:

Code:

<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('#thetheTopPanel').topPanel({
            theme : 'black', 
            bgColor : '', 
            borderWidth : 0, 
            borderColor : '', 
            textColor : '', 
            tabRadius : 8, 
            radius : 0, 
            shadowSize : '', 
            shadowColor : '', 
            opacity : 10, 
            width : '100px', 
            widthUnit : '%', 
            height : '200px', 
            autoOpen : false, 
            openIn : 10, 
            autoClose : false, 
            closeAfter : 30, 
            showCloseButton : false, 
            closeButtonText : 'Close', 
            showTab : true, 
            tabText : 'Our Sponsors', 
            speed : 500,
            firstVisitShow : true,
            regularity : 'always', 
            backLink : true
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.show_hide').showHide({
		speed: 1000,  // speed you want the toggle to happen
		easing: '',  
		changeText: 1,
		showText: 'Our Sponsors',
		hideText: 'Close' 
	}); 
    });
</script>

Now, since jQuery doesn't natively have a function called .showHide(), you must be trying to use a plugin? Can you link us to which one?

Also, I see the markup that the .showHide function is supposed to bind to:

Code:

<a href="http://www.chefsconsortium.com/#"  class="show_hide" rel="#slidingDiv">Our Sponsors</a>

But, I don't see this element on page. Is it supposed to be invisible?

Also, can you define, "sliding panel". I do see a slide show with previous/pause/next buttons, but that is working well in all browsers even with this javascript error. Maybe I'm looking at the wrong thing?

 

Thanks for your reply. It's a WordPress plugin (http://thethefly.com/wp-plugins/thethe-sliding-panels/) that is introducing the script. Though I don't see the custom script it's calling.

As for the slider: it's the slidingDiv that is part of the Wordpress plugin. BTW - I've made several attempts to contact the developers with no reply (http://thethefly.com/support/forum/?mingleforumaction=viewtopic&t=99.0).

Regardless of the plugin, whenever I try to use a jquery plugin for showhide it refuses to work. I suspect it has something to do with a commercial plugin: http://plugins.righthere.com/custom-backgrounds/. Since, whenever I remove that script all is well.

Thanks for your help