I'm trying to write a short Wordpress JQuery for Wordpress comments that would allow users to toggle specific comments on and off. This is my first script, and I'm having a tough time.

Once overtly simplified, the comments are formatted like so:

<li id="li-comment-<?php comment_ID() ?>">
    <div class="gravatar"><img src="#" /></div>
    <div class="comment_poster">Username</div>
    <div class="comment_options">Option buttons</div>
    <div class="comment_content">Comment</div>
</li>

In the "comment_options" DIV is a series of buttons that control the individual comments (reply, quote, edit, close, etc.). The close button is what I'm trying to write this script for. I need it to toggle the "gravtar" and "comment_content" DIVs, but leave the rest in place so that it still displays the user ID and controls.

However, I can't seem to figure out how to contain the action.

This is what I have so far:

$(document).ready(function() {
    $("div.trigger").click(function() {
        $("div.gravatar").slideToggle();
        $("div.comment_content").slideToggle();
    });

});

The problem with this is that it closes are the .gravatar and .comment_content on the page, not just the ones found in the same list item.

If you're curious, this is the page I'm working on.

Any idea how I could resolve this? Again, this is my firs time with JQuery, so I'm a little fuzzy on how it all works. Thanks!