Question

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?

Answer 1

You could use parent():

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