JQuery & Wordpress - Hide multiple divs inside unique ID?
- by steelfrog
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!
