slideToggle equivlanet for when a page is loaded

Question

I am using jQuery to hide some content in collapsible panels, to do this I am using the following mark up and script:

HTML

<div class="trigger">Collapsible Header 1 - Click to toggle</div>
<div class="panel">
    content 1
</div>

<div class="trigger">Collapsible Header 2 - Click to toggle</div>
<div class="panel">
    content 2
</div>

jQuery:

$(document).ready(function() {
    $(".trigger").click(function(){
        $(this).next(".panel").slideToggle("medium");
    });
});

A fiddle of it here:

http://jsfiddle.net/LkTf8/1/

This works great, however I am trying to start with the panels collapsed. Currently, they are open, not closed. What is the best approach to start with the panels collapsed?

Answer 1

set .panel to display: none

FIDDLE