JQuery show and hide div on mouse click (animate)

javascript, jquery, jquery-effects, jquery-ui

Solution

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.

Problem

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"); } ); }); ```

Original source