JQuery show and hide div on mouse click (animate)

Question

This is my HTML code:

<div id="showmenu">Click Here</div> <div class="menu" style="display: none;">     <ul>         <li>Button1</li>         <li>Button2</li>         <li>Button3</li>     </ul> </div> 

And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).

I use JQuery 2.0.3

I've tried this, but it doesn't do what I want.

$(document).ready(function() {     $('#showmenu').toggle(         function() {             $('.menu').slideDown("fast");         },         function() {             $('.menu').slideUp("fast");         }     ); }); 

Answer 1

That .toggle() method was removed from jQuery in version 1.9. You can do this instead:

$(document).ready(function() {     $('#showmenu').click(function() {             $('.menu').slideToggle("fast");     }); }); 

Demo: http://jsfiddle.net/APA2S/1/

...but as with the code in your question that would slide up or down. To slide left or right you can do the following:

$(document).ready(function() {     $('#showmenu').click(function() {          $('.menu').toggle("slide");     }); }); 

Demo: http://jsfiddle.net/APA2S/2/

Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.