Question

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.

Answer 1

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/