jquery animate - how to slide in and out on second click?

Question

How to slide out on click and slide in on click using jquery animate? In my code (below) I slide out a div, but cant get it to slide back in based on click. How could I do that? Thanks!

html:

<nav>
    <ul id="menu">
        <span id="toggle" class="glyphicon glyphicon-align-justify"></span>
        <li><span class="glyphicon glyphicon-home"></span><a>Home</a></li>
        <li><span class="glyphicon glyphicon-user"></span><a>About</a></li>
        <li><span class="glyphicon glyphicon-blackboard"></span><a>Portfolio</a></li>
        <li><span class="glyphicon glyphicon-envelope"></span><a>Contact</a></li>
    </ul>
</nav>

js:

$('#toggle').click(function() {
    if ('#menu'){
        $('#menu').animate({
            //  height: 'toggle'
        }, 1500, function() {
        });
    }
 });

Answer 1

There is a function named is in the jQuery library. You can use it to check if input is hidden or shown:

if ($('#x').is(':visible')) {
    $('#x').slideUp('fast');
} else {
    $('#x').slideDown('fast');
}

Answer 2

I think you can simply use slideToggle() .

$('#toggle').click(function() {
  $('#menu').slideToggle();
});