jQuery toggling divs, expand collapse all and keep first item selected when page loads
- by hollyb
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!
