Jquery slider function

Question

I'm trying to get the "Tell a friend button" on this page to return to its original position when the user clicks on "Close," but it does something different. It open slides out when you click on it and I want it to do the opposite when the user clicks on close. The function is shown below:

$(document).ready(function() {
    $(".tell").click(function () {
        $("DIV#tellform").show("slide", { direction: 'left' }, 2000);
        $(".tell").hide("fade", {}, 1);
    });

    $(".closer").click(function () {
        $("DIV#tellform").show("slide", { direction: 'right' }, 0);
    });
});

And the HTML is shown below:

<div class="closer">
    <a href="#">X close</a>
</div>

Answer 1

I changed The function as shown bellow and it's now doing exactly what I want.

<script type="text/javascript">

    $(document).ready(function() {

   $(".tell").click(function () {

      $("DIV#tellform").show("slide", { direction: 'left' }, 2000);

      $(".tell").hide("fade", {}, 1);

});

   $(".closer").click(function () {

      $("DIV#tellform").hide("slide", { direction: 'left' }, 2000);
      $(".tell").show("fade", {}, 1);

      });

  });



</script>

Answer 2

Change

$("DIV#tellform").show("slideTo", { direction: 'right' }, 0);

to

$("DIV#tellform").show("slideTo", { direction: 'left' }, 0);

Answer 3

Or this:

$(".tell").click(function () {

    $(".tell").hide();
    $("#tellform").animate({
      width: 'toggle'
    }, 2000 );

});


$(".closer").click(function () {

    $("#tellform").animate({
      width: 'toggle'
    }, 2000, function(){
        $(".tell").show();
    });

});