Jquery Bind / Unbind

Question

On my site I have a contact button that when pressed slides a div containing a contact form downwards (using jQuery animate). This div has a close button in it that when pressed slides it back up (it's original position is off the screen). I need to make it so when the contact button is pressed, it only works once but then works again when the div has been closed.

I know this uses the bind / unbind function, however I can't get it working. Here is my code:

$(document).ready(function() {
var handler = function() {
$('.top,.left,.main,.header').animate({
top: '+=120'
}, 1300, 'easeOutBounce');
}
$('#contact').bind('click', handler);
$('#contact').unbind('click', handler);
});
$('#close').click(function() {
$('.top,.left,.main,.header').animate({
top: '-=120'
}, 1300, 'easeOutBounce');
});

the site where I'm trying to add it into is here: www.samskirrow.com/projects/move_div

Thanks for your help. Sam

Answer 1

Figured it out, decided not to use bind, unbind commands but instead toggle. I have a close button that just takes on the role of the open button, therefore it doesn't disrupt the toggle cycle.

$(document).ready(function() {
  $('#contact').toggle(function() {
    $('.top,.left,.main,.header').animate({
      top: '+=120'
    }, 1300, 'easeOutBounce');
  },function() {
    $('.top,.left,.main,.header').animate({
      top: '-=120'
    }, 1300, 'easeOutBounce');
  })
  $('#close').click(function() {
  $("#contact").click();
  });
});

Hope this is useful to someone :)