How can i trigger each button when theire are multiple of them? With Jquery

Question

I got this code for a project. When i click on #showbutton i want all comments to slideout. which for one element its not that hard to do. im using this code for that:

(this is a comment section inside a post)

   <button id="show">Show comments</button>
   <div class="comments2" id="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button id="close">Close comments</button>

$( document ).ready(function() {
    $("#comments").hide();
    $("#close").hide();

    $("#show").click(function() {
        $("#show").hide();
        $("#comments").slideDown(1000);
        $("#closebutton").slideDown(1100);
    });

    $("#close").click(function() {
        $("#comments").hide();
        $("#close").hide();
        $("#show").show();
    });

});

But now i have the problem, there are more posts with comments. And every post can slide out its own comments. And if i click one button all the comments from only one post will slide out and the rest wont work. How can i make this code that for every button it can slide out its own comments

You can't repeat ID's in a page. They are unique by definition. Use common classes and unique ID's instead. That being said you don't want to use ID as selector either — charlietfl, Oct 27 '18 at 22:37
Possible duplicate of [jQuery to loop through elements with the same class](https://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class) — devlin carnate, Oct 27 '18 at 22:38

score 0 · Accepted Answer · answered Oct 27 '18 at 22:55

You need to change your IDs and classes something like

   <button class="show">Show comments</button>
   <div class="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button class="close">Close comments</button>



   <button class="show">Show comments</button>
   <div class="comments">
      <p><b>person</b>: comment comment comment </p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
      <p><b>person</b>: comment comment</p>
    </div>
    <button class="close">Close comments</button>

so that its equal through all "parts".

Then you can do something like

$( document ).ready(function() {
   $(".comments").hide();
   $(".close").hide();

   $(".show").click(function() {
    $(this).hide();
    $(this).next().slideDown(1000);
    $(this).next().next().slideDown(1100);
  });

  $(".close").click(function() {
    $(this).prev().prev().show();
    $(this).prev().hide();
    $(this).hide();
  });
 });

A bit crappy but for your case would work - would need like a loop or better structure oh html if you have more element per "part".

<!DOCTYPE html>
<html>
<script
     src="https://code.jquery.com/jquery-3.3.1.min.js"
     integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
     crossorigin="anonymous"></script>
<script type="text/javascript">

$( document ).ready(function() {
    $(".comments").hide();
    $(".close").hide();

    $(".show").click(function() {
        $(this).hide();
        $(this).next().slideDown(1000);
        $(this).next().next().slideDown(1100);
    });

    $(".close").click(function() {
  $(this).prev().prev().show();
        $(this).prev().hide();
        $(this).hide();
    });

});
</script>

<body>
 
    <button class="show">Show comments</button>
    <div class="comments">
    <p><b>person</b>: comment comment comment </p>
    <p><b>person</b>: comment comment</p>
    <p><b>person</b>: comment comment</p>
    <p><b>person</b>: comment comment</p>
  </div>
  <button class="close">Close comments</button>

 

    <button class="show">Show comments</button>
    <div class="comments">
    <p><b>person</b>: comment comment comment </p>
    <p><b>person</b>: comment comment</p>
    <p><b>person</b>: comment comment</p>
    <p><b>person</b>: comment comment</p>
  </div>
  <button class="close">Close comments</button>
 
</body>

</html>

Thanks. I was thinking about the next() function but since im a beginner with those kind of functions i couldnt make it up myself. Its not necessarily the best but it works fine! — kasrra, Oct 27 '18 at 23:28

charlietfl · Answer 2 · 2018-10-27T23:05:12.013

Use common classes instead of ID's.

You can also use same class on comment buttons and conditional logic if it is show or hide button.

Also wrapping each block of comments in it's own container simplifies traversing to the instance specific elements

$('.comment-button').click(function() {
  // button event occured on
  var $btn = $(this).hide(),
    // instance specific comments
    $comments = $btn.siblings('.comments'),
    // this is a show or hide button?
    isShow = $btn.hasClass('show'),
    // other button related to this instance
    $otherBtn = $btn.siblings('.comment-button');
    
  if (isShow) {
    // what to do when show button clicked
    $comments.slideDown(1000, function(){
       $otherBtn.slideDown()
    })
    
  } else {
    // what to do when close button clicked  
    $comments.hide();
    $otherBtn.show()
  }

});

.comments,
.comment-button.close {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <button class="comment-button show ">Show comments 1</button>
  <div class="comments">
    <p>Comments 1 </p>
  </div>
  <button class="comment-button close">Close comments 1</button>
</div>

<div class="comment-container">
  <button class="comment-button show">Show comments 2</button>
  <div class="comments">
    <p>Comments 1 </p>
  </div>
  <button class="comment-button close">Close comments 2</button>
</div>

Thanks for the helpfull answer. I already see that their are few ways to do it. this also works fine. — kasrra, Oct 27 '18 at 23:35

How can i trigger each button when theire are multiple of them? With Jquery

2 Answers2