OnClick event not functioning to increase/decrease top margin

Question

Hi,

I have a DIV that im trying to adjust the top margin on upon click of the trigger link using jQuery. My code is below.

The problem is, this only works one way - decreasing the negative top margin back down to 0. But on second click it doesnt increase it back up to -200px.

Anyone have any idea why?!

$('.gh-gallink').click(
    function() {
        $('.gallery_container').animate({ marginTop: "0px" }, 2000)
    },
    function() {
        $('.gallery_container').animate({ marginTop: "-200px" }, 2000);
    }
);

Answer 1

Instead of .click() you need .toggle() for it to cycle functions when clicked, like this:

$('.gh-gallink').toggle(
  function() {
    $('.gallery_container').animate({ marginTop: "0px" }, 2000)
  },
  function() {
    $('.gallery_container').animate({ marginTop: "-200px" }, 2000);
  }
);