Question

Thanks in advance for the help, because I am a complete newb when it comes to jQuery. First, let me explain what I’m trying to do. I am building a wordpress theme, and I want to make comments viewable in the list of posts instead of just the individual posts as is default behavior. To keep the comments list from being out of control on every post, I want to use jQuery to hide them until you click a button. Here is an example of the html from one of the posts:

<div class="comments_section>
  <p class="comments_link">1 Comment</p>
  <p class="PostAComment_link">1 Comment</p>
  <ul class="Comments">
    <li>Comment1</li>
    <li>Comment1</li>
  </ul>
</div>

Then I have the following jQuery:

jQuery(document).ready(function() {
jQuery(".Comments").hide();
//toggle the componenet with class msg_body
jQuery(".comments_link").click(function()
{
  jQuery(".Comments").slideToggle();
});

So when you click the text with the class .comments_link, it unhides/hides the UL with the class of .Comments. It works, except clicking the link toggles ALL the ULs with that class. How can I target just the .comments div that is within the specific .comments_section div?

Thanks again!

Answer 1

You can try this:

jQuery(this).siblings(".Comments").slideToggle();

Where within the click event handler this is the element clicked, so jQuery(this).siblings() gives you (obviously) the siblings of that element, and the .siblings() method optionally lets you select siblings that match a particular selector (in this case, “.Comments”).

This assumes you have multiple “comments_section” divs each of which has only one comments link and comments list in it.