Question

I used this function to animate the parent element of the link:

            $(".user-review-toggle").toggle(function(){
                $(this).css("backgroundPosition", "0 -12px");
                $(this).closest('.user-review').animate({height:150},200);
            },function(){
                $(this).css("backgroundPosition", "0 0");
                $(this).closest('.user-review').animate({height:98},200);
            });

But now, what I need to do is to animate the element that sits on top of the link:

    <div class="user-contribution">
     <p class="user-review"> Review</p> 2. Animate this
     <a class="user-review-toggle" href="#">Read more...</a> // 1. Clicking this

There are many .user-contributions divs so the link must only animate the one that is on top of it.

Any suggestions to accomplish this?

Answer 1

You can use prev to get the immediately-preceding element, e.g.:

$(".user-review-toggle").prev().toggle(...);
//                       ^

prev returns the sibling element immediately before the reference element. In your case, since the p is immediately prior to the a, that’s what you want.