Toggling a single element within a class when other div is clicked Jquery

carolpanda

New Member
I'm trying to setup a simple comment toggle for a wordpress build.CSS \[code\]<div class="commenttoggle"> <p class="popcom">Show Comments</p> ~~~Clickable Button~~~~~~</div><div id="comments" class="comments-area"> ~~~~PHP code calling WP comments~~~~</div>\[/code\]jQuery\[code\] jQuery(document).ready(function($) { $('.comments-area').hide(); $('.commenttoggle').click(function() { $('.comments-area').toggle(); }); });\[/code\]The above code works but when i click the show comments button under one post all the comments sections display. I've been looking over the jQuery api & here at stackoverflow but can't seem to find any advice about only toggling the element closest to the click event.I've tried .closest & .parent but i can't seem to be able to make it work. I'd really appreciate some code but also an explanation as i'm just starting with jQuery.
 
Top