Question

I built this flyout contact panel. It worked fine until I put it into my WordPress site, then it refused to work at all. Here’s what it’s supposed to do:

http://jsfiddle.net/XwTpE/1/

I found that if I put jQuery(document).ready at the beginning, it started working, but now it won’t close! When you hit the close button, it just re-opens. In fact, I’ve noticed that anywhere you click on the page causes it to re-open. See demo here:

http://jsfiddle.net/q9b7M/1/

Hopefully this is simple to fix! Any help is appreciated. Thanks!

Answer 1

You need:

jQuery(document).ready(function() {
  jQuery('#contactFlyout').click(function()
 {
    jQuery(".togglepanel:visible").hide();
    jQuery("#contact_panel").animate({width:'toggle',height:'toggle'},200 );
});

// the close button
$('.closeDiv').click(function()
 {
    jQuery(".togglepanel:visible").animate({width:'toggle',height:'toggle'},200 );

});
});

See: http://jsfiddle.net/DcRHh/2/

Or you can use the shorthand as pointed out by Fabricio. Although I would stick with jQuery over $ inside WordPress, unless you know what you are doing when it comes to avoiding conflict with other scripts.