jQuery .animate() sets display:none, how to avoid?

Question

I have the following code:

HTML:

<div id="clickme">
    Click me  :-)
</div>

<div id="info" style="background:red; width:100%; height:100px; margin-bottom:-100px; z-index:20; position:absolute; bottom:0px;">
  Stay, damn!
</div>

JavaScript:

$('#clickme').click(function() {
    $('#info').animate({
        marginBottom: 'toggle'
    },{
        duration:500
    });
});

It's also available at http://jsfiddle.net/DxnQJ/

Obviously, I want the #info DIV to appear/disappear whenever the #clickme DIV is clicked. It's working as intended, except that the #info DIV disappears after the animation due to jQuery setting its CSS display property to none.

How can I tell jQuery to stop hiding my DIV?

Answer 1

I would recommend using .slideToggle:

$('#clickme').click(function() {
    $('#info').slideToggle(500);
});

Demo: http://jsfiddle.net/Daniel_Hug/DxnQJ/2