toggle() an animate() with jquery

Question

this is a super easy question. I know basically what I want and how to do it, I'm jusy not sure what selector to use in a certain part. The animation works fine if I take away the toggle() function, but it only works to open the menu, not to close it.

Here is my jquery code

$(document).ready(function(){
    $('#menu_button').click(function(){
        $(????).toggle(function(){
            $('.sidebar_menu').animate({left:'0'}, 'slow');
            $('.wrapper').animate({'margin-left':'250px'}, 'slow');
        });

    })
});

And here is my page code:

<div class="sidebar_menu">
        <h2>Menu</h2>
        <h3>1. Escolher produto</h3>
        <ul>
            <li>Entradas</li>
            <li>Peixe</li>
            <li>Saladas</li>
        </ul>
        <h3>2. Preencher dados</h3>
        <h3>3. Finalizar pedido</h3>
    </div>

    <div class="wrapper">
            <header>
                <button id="menu_button">menu</button>
            </header>
   </div>

And my CSS:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/**MAIN STYLES**/
body {
    height: 100%;
    width: 100%;
    background-color:#C00;
}
.sidebar_menu {
    width: 25%;
    height: 100%;
    display:block;
    position:fixed;
    left: 0;
    top: 0;
    background-color: #666;
}
.wrapper {
    width: 75%;
    float:left;
    margin-left: 25%;
    background-color:#C00;
}
.menu_button {
    display:none;
    }

    .slideIn {
        background-color: #090;
    }

@media screen and (max-width: 50em){
    .sidebar_menu {
        width: 250px;
        left: -250px;
    }
    .wrapper {
        width: 100%;
        margin-left: 0;
    }
    #menu_button {
        display:block;
    }
}

Answer 1

Here is a fiddle with properly working code: http://jsfiddle.net/6zg7K/1/

You need to add $('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow'); to the code provided by adeneo, so your entire function would be:

$('#menu_button').on('click', function(){
    var state = parseInt($('.wrapper').css('margin-left'),10) > 200;
    $('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow');
    $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow');
});

This code is a modified version of adeneo's below. All credit for code goes to him.

Answer 2

You'll have to create some sort of toggling functionality based on the elements left margin :

$(document).ready(function(){
    $('#menu_button').on('click', function(){
        var state = parseInt($('.wrapper').css('margin-left'),10) > 200;

        $('.sidebar_menu').animate({left:'0'}, 'slow');

        $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow');
    });
});

FIDDLE