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开发者_Python百科_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.
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');
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)
精彩评论