I use this code to show and hide the div with a class named "text":
$(".text").hide();
$('.more-link').click(function(){
$(".text").slideToggle();
});
Together with this HTML:
<div class="box">
<p>Some text</p>
<div class="text">
<p>Even more text</p开发者_如何学编程>
</div>
<a href="#" class="more-link">Read more</a>
</div>
<div class="box">
<p>Some text</p>
<div class="text">
<p>Even more text</p>
</div>
<a href="#" class="more-link">Read more</a>
</div>
I need help to target the specific "div.text" in the parent div. I guess I should use the parent() function, but I don't understand how I should apply it.
Thank you for any help.
You could do (in this way each links shows only the relative text):
$(".text").hide();
$('.more-link').click(function(){
$(this).prev(".text").slideToggle();
});
fidlle: http://jsfiddle.net/QEVXf/
$('.text').hide();
$('.more-link').click(function(){
$(this).parent().find('.text').slideToggle();
});
Try :
$(".text").hide();
$('.more-link').click(function(e){
$(this).parent().find(".text").slideToggle();
});
$(".text").hide();
$('.more-link').click(function(){
$(this).siblings(".text").slideToggle();
});
Replace
$('.more-link').click(function(){
$(".text").slideToggle();
});
with
$('.more-link').click(function(){
$(this).parent().find(".text").slideToggle();
});
精彩评论