JQuery show and hide div on mouse click (animate)

Question

This is my HTML code:

Click Here

    

        
         


        
      

Answer 1

I would do something like this

DEMO in JsBin: http://jsbin.com/ofiqur/1/

  Click Here
  

    

      
Button 1
      
Button 2
      
Button 3
    
  

and in jQuery as simple as

var min = "-100px", // remember to set in css the same value
    max = "0px";

$(function() {
  $("#showmenu").click(function() {

    if($(".menu").css("marginLeft") == min) // is it left?
      $(".menu").animate({ marginLeft: max }); // move right
    else
      $(".menu").animate({ marginLeft: min }); // move left

  });
});