I'm using this:
jQuery('.class1 a').click( function() {
if ($(".class2").is(":hidden")) {
$(".class2").slideDown("slow");
} else {
$(".class2").slideUp();
}
});
On page structure:
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
It only works when you don't have multiple class1/class2 sets like:
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
<div class="class1">
<a href="...">text</a>
<div class="class2">text</div>
</div>
How do I change the initial jquery code so that it only effects class2 under the class1 that was clicked? I tried recommendations from How to get the children of the $(this) selector? but haven't succeeded.
This question is related to
jquery
css-selectors
children
This is a lot simpler with .slideToggle():
jQuery('.class1 a').click( function() {
$(this).next('.class2').slideToggle();
});
EDIT: made it .next instead of .siblings
http://www.mredesign.com/demos/jquery-effects-1/
You can also add cookie's to remember where you're at...
http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/
In the click event "this" is the a tag that was clicked
jQuery('.class1 a').click( function() {
var divToSlide = $(this).parent().find(".class2");
if (divToSlide.is(":hidden")) {
divToSlide.slideDown("slow");
} else {
divToSlide.slideUp();
}
});
There's multiple ways to get to the div though you could also use .siblings, .next etc
http://jqapi.com/ Traversing--> Tree Traversal --> Children
Source: Stackoverflow.com