Jquery hide/show not working in Firefox/Chrome

Question

Hello,

I have a bit of HTML/JQuery code that only seems to be working for IE 8. I am attempting to embed a meebo chat widget into a wiki by adding some direct html code. I don't want the widget to load by default, as it takes a bit of time, so I am putting it in a div and hiding it using Jquery.

Unfortunately, this only seems to work in Internet Explorer. In Firefox 3, when I click on the toggle button, nothing happens. When I tried in Google Chrome, the show/hide text would toggle, but the embedding widget doesn't show up.

Does anyone know if this is an issue using JQuery, or perhaps a browser compatibility issue? There is a lot of backend wiki code that could be affecting the issue as well. For instance, the place where I embed the widget is nested in both tables and other divs. Could this be causing problems with the JQuery selectors?

Any help would be appreciated.

Jquery Code:

$(document).ready(function(){

    $(".btn-slide").click(function(e){ 
       e.preventDefault();

       $("#meebo-panel").toggleClass("meebo-open").toggleClass("meebo-closed").toggleClass("meebo-hide").toggleClass("meebo-show");
       $(".btn-slide").toggleClass("show-text").toggleClass("hide-text");
       $(".show-hide-panel").toggleClass("green-panel").toggleClass("grey-panel");

       $(".meebo-show").show();
       $(".meebo-hide").hide();

       $(".show-text").text("Chat with me");
       $(".hide-text").text("Hide");
       return false;   
    });
});

My HTML:

<div class="show-hide-panel green-panel"><a href="#" class="btn-slide show-text">Chat now</a></div>
<div id="meebo-panel" class="meebo-closed meebo-hide">
    Test
</div>

EDIT: It appears that this issue occurs regardless of what is in the div. I simplified the example to include text instead, since I believe it streamlines the code a bit.

Answer 1

you js is fine mate i think. there is something wrong with your markup.

you have got an object tag and then inside it a param which is fine but its being closed with an embed.

Object tag for ie Embed for ff

hope this helps

Answer 2

I figured out what the problem was. The issue was that the wiki backend was already including a different (and older) version of JQuery.

To fix this, I needed to use the core JQuery function noConflict().

My code ended up looking like:

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function($){
    //Do jQuery stuff using $
        ...
        ...
});
</script>

This fixed all the issues of conflicting JQuery libraries.