Hi, I have a question about some functionality I'm trying to add to my jQuery to enable a button or text to expand/contract all the divs on click... and I'd like to figure out how to keep the first div open when the page loads.

Here is the jQuery:

(document).ready(function(){

//Hides containers on load
$(".toggle_container").hide(); 

//Switch "Open" and "Close" state on click
$("h2.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

//Slide up and down on click
$("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
    });
});

And the css:

// uses a background image with an on (+) and off (-) state stacked on top of each other
h2.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;}
h2.trigger a {color: #fff;text-decoration: none; display: block;}
h2.active {background-position: left bottom;}
.toggle_container { overflow: hidden; }
.toggle_container .block {padding: 20px;}

And the html

<h2 class="trigger"><a href="#">Heading</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

<h2 class="trigger"><a href="#">Heading 2</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

So it works great and looks great. However, when I try to get it to keep the first instance open, the background image that should adjust show the (-) state doesn't change. The code I used to this was:

$(".toggle_container:first").show();

So, my question is, does anyone know of an easier way to show the first instance of this as open without having to created specials rules/class for the first item? Also, any ideas about how to make an open all/close all link?

Thanks!