Adding jQuery event handler to expand div when a link is clicked
- by hollyb
I'm using a bit of jQuery to expand/hide some divs. I need to add an event handler so that when a link is clicked, it opens a corrisponding div. Each toggled div will have a unique class assigned to it. I am looking for some advice about how to build the event handler.
The jQuery
$(document).ready(function(){
$(".toggle_container:not(:first)").hide();
$(".toggle_container:first").show();
$("h6.trigger:first").addClass("active");
$("h6.trigger").click(function(){
$(this).toggleClass("active");
$(this).next(".toggle_container").slideToggle(300);
});
The css:
// uses a background image with an on (+) and off (-) state stacked on top of each other
h6.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;}
h6.trigger a {color: #fff;text-decoration: none; display: block;}
h6.active {background-position: left bottom;}
.toggle_container { overflow: hidden; }
.toggle_container .block {padding: 20px;}
The html has a list of links, such as:
<a href="#">One</a>
<a href="#">Two</a>
and the coorisponding divs to open:
<h6 class="trigger">Container one</h6>
<div class="toggle_container">
div one
</div>
<h6 class="trigger">Container two</h6>
<div class="toggle_container Open">
div one
</div>
As I mentioned, I will be assigning a unique class to facilitate this.
Any advice? Thanks!
To clarify, i'm looking for some advice to build an event handler to toggle open a specific div when a link is clicked from a different part of the page, from a nav for instance.
