JQuery toggles all divs in a .each loop

I have my posts intercepting a .each loop, and I have a link to display comments at the bottom of the loop.

I want to show the comments section on a click, but when I click on comments for all posts that open. I only need the one that clicked to open.

I tried a lot of different examples that I found on this site, but so far none of them have worked.

I am sure this is very easy to accomplish, but I am noob.

Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/

Like the code snippet -

Js

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
    $('.artist-micropost-comments-container').toggle();
  });
});

HTML

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

<div class="artist-micropost-social">
  <a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>

CSS

.artist-micropost-comments-container {
  display: none;
}
+4
source share
3 answers

, , . DOM , . , , .

,

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
    $(this).closest('.artist-micropost-social')
             .next('.artist-micropost-comments-container').toggle();
  });
});

DEMO

+6

$(document).ready(function() {
    $('.artist-micropost-comment-click').click(function() {
        $(this)
            .closest('.artist-micropost-social') //Find parent container
            .next('.artist-micropost-comments-container') //Find next comments container
            .toggle();
    });
});
+2

Try WATCH DEMO

$(document).ready(function() {
  $('.artist-micropost-comment-click').click(function() {
      $( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();

  });
});
0
source

All Articles