Question

I have the following code so far:

$('div.welcome-handle').click(function() {
        top.$('#welcome-message').toggle(function() {
            $(this).animate({"left": "-=749px"}, 500);
        },
        function() {
            $(this).animate({"left": "+=749px"}, 500);
        });
    });

I need to be able to click on .welcome-handle to hide #welcome-message off screen, then be able to click .welcome-handle again to bring it back to original position.

The code above does the first part bu then on second click it shows #welcome-message and slide it back to hide it. How can i get it to do this: (#welcome handle is absolute positioned on screen)

Click event – slide div -749px
Click event – slide div +749px
and so on…

Answer 1

You can implement your own toggle. you can read docs of jQuery toggle.

   var isShow = true;
    $('div.welcome-handle').click(function() {
          if(!isShow){
            isShow= true;
            top.$('#welcome-message').animate({"left": "-=749px"}, 500);
           }else{
             isShow= false;
             top.$('#welcome-message').animate({"left": "+=749px"}, 500);
        });