Adding jQuery event handler to expand div when a link is clicked

Question

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.

Answer 1

You can trigger the click event for a specific header like this:

<h6 class="trigger" id="myHeader">Container two</h6> 
<div class="toggle_container Open">
div one
</div>


$('#myHeader').click();

This will hide the container if it's already open; to prevent that, change it to

$('#myHeader:not(.active)').click();

(If the header is already .active, the selector won't match any elements and nothing will happen)

Answer 2

I would lay out your elements like this: (preferring to use an ID instead of a unique class)

<a class="toggler" href="#div1">Click</div>
<a class="toggler" href="#div2">Click</div>
<div class="toggle-container" id="div1">
 Hello
</div>
<div class="toggle-container" id="div2">
 Hello
</div>

Then the JS would be:

$('div.toggle-container').hide().first().show().addClass('active');
$('a.toggler').bind('click', function (e) {
   var href = $(this).attr('href');
   $('div.active').hide().removeClass('active');
   $(href.slice(href.indexOf("#"))).show().addClass('active');

   event.preventDefault();
});

If you definitely want to use a unique class, modify the selector as such:

$("." + href.slice(href.indexOf("#") + 1)).show().addClass('active');