Start with div collapsed

[rekkette]

Hello!

I have a collapsible div on my site and it works perfectly EXCEPT
I don't know how to modify it so that when the page is loaded or refreshed it STARTS with the div contracted.

Here is the script:

<script type="text/javascript">
$(document).ready(function(){
    //hide the all of the element with class msg_body
    $(".msg_body").show();
    //toggle the componenet with class msg_body
$(".question").click(function () {
    if ($(this).next(".answer").is(":hidden")) {
        $(this).next(".answer").slideDown("slow");
        $(this).children('span').text('-Bio');
    } else {$(this).next(".answer").slideUp("slow");
        $(this).children('span').text('+Bio');
        
    }
});
});
</script>

Here is the site:
rachelforshee.net

[molendijk]

Two small changes:

<div class="question" >
<span>+Bio</span>
</div>
<div class="answer" style="display: none">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum.</div>

Good luck.