jQuery Flyout panel won't close

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.

Answer 2

That's not how you use DOM Ready handler:

jQuery(function ($) { //shorthand for DOM Ready, put your code inside of it
  $('#contactFlyout').click(function () {
    $(".togglepanel:visible").hide();
    $("#contact_panel").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
  $('.closeDiv').click(function () {
    $(".togglepanel:visible").animate({
      width: 'toggle',
      height: 'toggle'
    }, 200);
  });
});

Fiddle

The special jQuery(function($){}) syntax is very useful for WP as it aliases jQuery back to $ inside the DOM ready handler scope. Very useful if you don't want to type jQuery over and over again.