How to make a checkbox be checked and div hidden when page loads?

I have a checkbox. I have a div with content under the checkbox. When the checkbox is checked, the div is hidden. When the checkbox is unchecked, the div is visible.

When the page is loaded, I want the checkbox to be checked and the div to already be hidden. When the checkbox is unchecked, the div should be visible.

I have tried using the click function, and I’ve tried using show and hide. But I can’t get the code to do what I want. Any help is greatly appreciated.

Here's my code:

<script>
$(document).ready(function()
{
    $('#checkbox_content').change(function()
    {
        if(this.checked)
            $('#content').fadeOut('slow');
        else
            $('#content').fadeIn('slow');       
    });
});
</script>


<div>
    <form action="">
       <input type="checkbox" name="" value="" id="checkbox_content" checked="checked">
    </form>
</div>


<div id="content"> 
    div content here 
</div>