CODEWITHSUNDEEP
jqueryjquery-selectors
Samuel
Samuel

Reputation: 3801

How to get next non child element

I honestly tried to do search before posting but couldn't find something specific. So my task is to show hidden content in the blog, when user clicks on the link. HTML looks like this:

<div class="entry">
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is all the hidden content</p></div>
</div>

Now jQuery I'm doing the following but it's not working:

$(".hidden_post").hide();
$(".a-toggle).click(function() {
$(this).next(".hidden_post").slideDown("slow"); });

So to get next element I need to go to a parent element first and then proceed search from there. Now it gets more complicated for me, because I'll actually going to have several hidden contents in one "entry". Like this:

<div class="entry">  
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #1</p></div>
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #2</p></div>
<p>Here is a visible content <a class="a-toggle"> Read More...</a></p>
<div class="hidden_post"><p>Here is hidden content #3</p></div>
</div>

Now if I use $(this).parent().next(".hidden_post").slideDown("slow"); It will go up to "entry" div and then will find first "hidden_post" only. I guess I still need another solution to go straight from <a class="a-toggle"> to <div class="hidden_post"> that is next to it. Is there any solution?

Upvotes: 1

Views: 909

Answers (3)

Vbloise
Vbloise

Reputation: 1

You could use the children method to get all direct children of the parent element.

$('div.entry').children('div.hidden_post');

This will return all of the div children of the div with class of entry who have a class of hidden_post.

Upvotes: 0

TJB
TJB

Reputation: 13497

The quickest way in this case would be to do parent -> next

$(".a-toggle").click(function(){
 $(this).parent().next(".hidden_post").slideDown("slow");
});

Upvotes: 0

Jacob Relkin
Jacob Relkin

Reputation: 163248

You could use parent():

$(".hidden_post").hide();
$(".a-toggle").click(function() {
   $(this).parent().next(".hidden_post").slideDown("slow");
});

Upvotes: 3

Related Questions