Using Jquery: How do I gracefully resize a Parent div after hiding a child div?

Question

Using Jquery: How do I gracefully resize a Parent div after hiding a child div? This code works to hide the Option1 as I want but then the container div SLAMS shut in a jarring way. Can I chain something on to the end to gracefully resize the div to fit the new size after the Option1 hides?

HTML:

<div id="Container">
    <div id="Option1">
        Users can do things here
    </div>

    <div id="Option2">
        <input type="checkbox" id="optout">I opt out of the other options
    </div>
</div>

Javascript/JQuery:

$('#optout').click(function () {
    if ($(this).prop('checked') == true) {
        $('#Option1').hide("drop");
    } else {
        $('#Option1').show("drop");
    }
});

Answer 1

try this code for jquery

$('#optout').click(function () {
    $('#Option1').slideToggle("slow");
 });