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?

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?

• javascript
• jquery

• Possible duplicate of jQuery find does not seem to work – Herohtar Commented Aug 11, 2019 at 7:31

4 Answers 4

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;
  });
});

.find(..) looks for the selector inside the current element.

What you might want is

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

Edit

Added another .parent() as the <a> is inside <p> and .read_more is not in the <p>

One potential cause of find() not being able to work is that the element you are looking for hasn't loaded when you call it.

In my case, I was replacing a text field with an editor plugin, and the editor had not loaded by the time I called find().

If you can't find the element when you know you should be able to, try setTimeout to add a delay before calling find().

Note: setTimeout is not a good solution for this issue, it just helps diagnose the problem. Try to come up with a way to wait until the element has loaded before you make your find() call.

You are trying to find .read_more under a tag in which it does not exist by replacing the this with document it may work