JQuery toggles divs, expands to collapse everything and saves the first element selected when the page loads

Question

I have a question about some functionality that I am trying to add to my jQuery to include a button or text to expand / assemble all divs on click ... and I would like to figure out how to save the first div when the page loads.

Here is 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 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 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>

This way it works great and looks great. However, when I try to get it to open the first instance, the background image that needs to be adjusted shows the state (-), does not change. The code I used for this:

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

, : - / ? , - , all/close all?

!

Answer 1

jQuery :

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

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

, .toggle_container, class="active" , <h2>, toggle() , ... active , .

, open/close :

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

jQuery :

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

, , , , , , , .

Answer 2

- IE:

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

Answer 3

@user279860 . , HTML , CSS-, .

Nick, :

 <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>

CSS :

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;
}

, HTML :

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

Div Sections Goes here

</div>
</div>

, . Nick :)

Answer 4

In addition to what Nick posted, you'll also need to make a rolling one.

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