jQuery toggling divs, expand collapse all and keep first item selected when page loads

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 i开发者_StackOverflowtem? Also, any ideas about how to make an open all/close all link?

Thanks!

You can change all your jQuery to this:

$(".toggle_container:not(:first)").hide(); 
$("h2.trigger:first").addClass("active");

$("h2.trigger").click(function(){
  $(this).toggleClass("active");
  $(this).next(".toggle_container").slideToggle("slow");
});

This hides all but the first .toggle_container, applies the class="active" to it's matching <h2>, and the toggle() is just simpler, a click now toggles the class...so we can just add active to match it being open on page load and it'll behave correctly.

Also, a open/close all would look like this:

<a href="#" id="openCloseAll">Open All</a>

jQuery like this:

$("#openCloseAll").toggle(function() {
  $(this).text("Close All");
  $(".toggle_container:hidden").prev(".trigger").click();
}, function() {
  $(this).text("Open All");
  $(".toggle_container:visible").prev(".trigger").click();
});

This opens all closed on the first click, changes it's text to accurately describe what the next click will do, and closes all open on the next click, then switches back, rinse, repeat.

Use this instead - It will make it work in IE too :

$(".toggle_container:first").show(); $("h2.trigger:first").addClass("active");

@user279860 I really found your code helpful pal. Instead of repeating the HTML for hover effect I used a single image using CSS stripes and the effect seems to work just perfect.

Using Nick's code I restructured the following:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();

    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });

});
</script>

and for CSS I used the following:

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:arial;
font-size: 1.4em;
font-weight: bold; 
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

So the final HTML becomes:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

Div Sections Goes here

</div>
</div>

Hope this helps to summarize all this discussion. Thanks Nick for clearing it further :)

Further to what Nick posted you will also need to do the sliding.

$("h2.trigger").click(function(){
    $(this).toggleClass("active");
    $(this).next(".toggle_container").slideToggle("slow"); // added 
});