Question

I’m trying to find the class .post-info inside the parent of a clicked element, .toggle-info. Right now all the .post-info’s on the page toggle. I’m trying to get only that one .post-info to toggle inside it’s parent container, .post.

<div class="post">
 <div class="toggle-info">Toggle Btn</div>

 <div class="post-info">
  <p>Toggle this content</p>
 </div>

</div>


$(".toggle-info").click(function () {   
  $(".post-info").animate({ 
    height: "toggle",
    opacity:"toggle"
  }, 520, 'swing');
});

Thanks in advance for the help!

Answer 1

You can do it like this:

$(this).closest(".post").find(".post-info").animate(...)

This goes up the parent chain from where the click happens and finds the .post class, then finds the .post-info in that parent and then applies the animation to that. This is very flexible in that .post-info could be anywhere in the .post parent and this would work. You can see it work here: http://jsfiddle.net/jfriend00/AeYZU/

For this particular exact HTML, you could also use this:

$(this).next().animate(...)

This would get the next sibling after the div that was clicked on. Note, that this method (as opposed to the previous one) relies on the exact position of .post-info as the next sibling and will break if its position changes. You can see this one work here: http://jsfiddle.net/jfriend00/qGCLx/