Question

This is my HTML:

        <p class="first">blah blah <a href="" class="more">read more</a></p>
        <div class="read_more">
            <p>more text</p>
        </div>

And javascript:

$(document).ready(function(){
  $('a.more').click(function(){
    $(this).find('.read_more').slideDown();
    return false;
  });
});

Doesn’t seem to do anything (read_more is set to display: none) any ideas?

Answer 1

Try this:

$(document).ready(function(){
$(‘a.more’).click(function(){
$(this).parent().next().find(‘.read_more’).slideDown();
return false;
});
});

Update:

Here is the demo 🙂

Code:

$(document).ready(function(){
  $('a.more').click(function(){
    $(this).parents().find('.read_more').slideDown('slow');
    return false;
  });
});

You could also do:

$(document).ready(function(){
  $('a.more').click(function(){
    $('.read_more').slideDown('slow');
    return false;
  });
});

Or this:

$(document).ready(function(){
  $('a.more').click(function(){
    $(this).parent().next().slideDown('slow');
    return false;
  });
});