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.