toggle() without setting display to none?

toggle() without setting display to none?

Ok so I have only been playing around for jquery for a couple of days (dear god, its amazing, why am I just now doing this?)
Basically I have a div box that I want to change sized when clicked. When the page loads its 150x150 and when clicked it animates to 500x500. I want it to return to 150x150 when clicked again, therefore I am using the toggle function. The first click resizes the div perfectly, but disappears. (the display property is set to none) I'm assuming this has to do with the toggle() function itself, changing the display property using hide(). Here's what I have, seems pretty simple:

  1. $(function() {

    function toggleBlock() {
        options = { to: { width: 500, height: 500, display: 'inline-block' } };
        $( "#basic_box" ).toggle( 'size', options, 300 );
    }

    $("#basic_box").click(function() {
                toggleBlock();
                return false;
            });

    });











1.) why is the div being set to display:none when clicked?
2.) Can I achieve the functionality I've stated with the toggle() function or must I use another method like show() & hide() with an if statement or something?