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!
