Reputation: 377
Here is the original structure:
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
and I add jquery to toggle the "in" div.
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in").slideToggle(100);
});
});
see FIDDLE DEMO
However, it controls all the objects, and I don't know how to perform them individually.
Thanks!
Upvotes: 2
Views: 81
Reputation: 55740
Use context selector
$(".in", this).slideToggle(100);
Code
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in", this).slideToggle(100);
});
});
Upvotes: 6
Reputation: 4001
Use this as the context selector in the call to jQuery, like this:
$(".in",this)
Full code:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in",this).slideToggle(100);
});
});
Fiddle: http://jsfiddle.net/kfBDJ/5/
Upvotes: 0
Reputation: 4599
Try this
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).children(".in").slideToggle(100);
});
});
Upvotes: 0
Reputation: 64526
Make the .in
selector relative to this
:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).find(".in").slideToggle(100);
});
});
Upvotes: 2