JQuery & Wordpress - Hide multiple divs inside unique ID?

Question

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.

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.

[EDIT] Here is the updated code:

// Custom comments callback
    function steelfrog_comments($comment, $args, $depth) {
        $GLOBALS['comment'] = $comment; ?>

        <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>" class="comment_comment">

            <div class="comment_info">  

                <div class="gravatar">
                    <?php echo get_avatar($comment,$size='80',$default='<path_to_url>' ); ?>
                </div>

                <div class="comment_poster">
                    <h5><?php comment_author_link(); ?></h5>
                    <span><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></span>
                </div>

                <div class="comment_options">
                    <ul class="options">
                        <li class="reply"><a href="#" title="Reply to this comment"><span>Reply to this comment</span></a></li>
                        <li class="quote"><a href="#" title="Quote and reply this comment"><span>Quote this comment</span></a></li>
                        <li class="link"><a href="#" title="Link to this comment"><span>Link to this comment</span></a></li>
                        <li class="website"><a href="#" title="Website of commentor"><span>Website of commentor</span></a></li>
                        <li class="edit"><a href="#" title="Edit this comment"><span>Edit this comment</span></a></li>
                        <li class="close"><div class="trigger"><a href="#" title="Remove this comment until the page is refreshed"><span>Remove this comment until the page is refreshed</span></a></div></li>
                    </ul>
                </div>
            </div>

            <div class="comment_content">
                <?php comment_text() ?>
            </div>
        <?php } 

And the current JQuery script:

$(document).ready(function(){
    $("div.trigger").click(function() {
        $(this).parent.parent("li").children(".gravatar, .comment_content").slideToggle();
    });
});

[EDIT] Got it working by using two separate selectors, but it sure is ugly.

$(document).ready(function(){

    $(".trigger").click(function(){
        $(this).parent().parent().parent().parent().parent().children(".gravatar, .comment_content").slideToggle('300');
        $(this).parent().parent().parent().parent().children(".gravatar").toggle('300');
        return false
    });

});

Answer 1

You want to find the divs in relation to the trigger element, like this

$("div.trigger").click(function() {
  $(this).closest("li:not(.close)")
         .find(".gravatar, .comment_content").slideToggle();
});

This climbs to the <li> wrapping the .trigger then looks for those divs inside it.

What you had before, like this: $("div.gravatar"), searches for all <div class="gravatar"> instead of just within a certain element, that's what the code above will change.

Answer 2

why not just hide the complete div.trigger ? ^^ ok maybe this doesnt work for you... you could do

$("div.trigger").click(function() {
    $("div.trigger > div").slideToggle();
});

this will hide all divs under div.trigger