How to toggle single class in jquery without affecting same class elements?

Question

I'm setting up a reddit-like commenting system on my website. Every comments has a little button in the right corner that collapses the comment.

I have the comment collapse by JQuery toggleClass.

$(".button").click(function() {

  $('.bottomtext').toggleClass('bottomtext-small');
  $('.upvote').toggleClass('upvote-small');
  $('.downvote').toggleClass('downvote-small');
  $('.main-content').toggleClass('main-content-small');
  $('.button').toggleClass('button-small');

});

The comment collapsing works fine on one comment, but since I toggle the class, every comment collapses. How can I only affect the comment which button I am clicking?

JSFiddle: https://jsfiddle.net/j765rkpc/7/

Answer 1

It seems that you need to get the elements that have those class names and are part of the same post as the clicked button, here is how you can do that:

 $(".button").click(function() { const $post = $(this).closest('.post-container'); $post.find('.bottomtext').toggleClass('bottomtext-small'); $post.find('.upvote').toggleClass('upvote-small'); $post.find('.downvote').toggleClass('downvote-small'); $post.find('.main-content').toggleClass('main-content-small'); $post.find('.button').toggleClass('button-small'); }); 

 .post-container { background-color: yellow; margin: auto; position: relative; display: flex; width: 75%; max-width: 1440px; } /*left side*/ .left-side { position: relative; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50px; max-width: 50px; min-width: 50px; background: lightblue; padding-left: 5px; padding-right: 5px; } /*main post*/ .post { margin: 0; padding: 0; flex-grow: 1; } .main-content p { margin: 0; padding: 0; padding: 10px; } .main-content { margin: 0; padding: 0; flex-grow: 1; } .contain img { width: 50%; } .toptext { margin: 0; padding: 0; padding-top: 10px; padding-left: 10px; height: 20px; color: #808486; font-size: 12px; background-color: lightgrey; } .bottomtext { margin: 0; padding: 0; padding-left: 5px; height: 15px; background: red; font-size: 14px; font-weight: bold; color: #878a8c; } .bottomtext img { margin-bottom: -2px; padding-right: 5px; } .toptext b { color: black; } .left-side .upvote { padding-bottom: 5px; } .left-side .downvote { padding-top: 7px; } .username { color: blue; } .main-content-small { margin: 0; padding: 0; flex-grow: 1; display: none; } .contain-small img { width: 50%; display: none; } .bottomtext-small { margin: 0; padding: 0; padding-left: 5px; height: 15px; background: red; font-size: 14px; font-weight: bold; color: #878a8c; display: none; } .left-side .upvote-small { padding-bottom: 5px; display: none; } .left-side .downvote-small { padding-top: 7px; display: none; } .button { position: absolute; top: 8px; right: 10px; background-color: white; border: 1px solid black; height: 14px; width: 20px; } .button:hover { background-color: grey; } .button-small { position: absolute; top: 5px; right: 10px; background-color: white; border: 1px solid black; height: 20px; width: 7px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="post-container"> <div class="left-side"> <div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div> <div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div> </div> <div class="post"> <p class="toptext"> <input type="button" class="button"></input> <span class="username">webdev18</span>&nbsp;&nbsp;&nbsp;&nbsp;33 points&nbsp;&nbsp;18 minutes ago </p> <div class="main-content"> <p class="contain-com"> When I want to collapse this comment by clicking the button in the corner... </p> <p class="bottomtext"> <img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond </p> </div> </div> </div> <div class="post-container"> <div class="left-side"> <div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div> <div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div> </div> <div class="post"> <p class="toptext"> <input type="button" class="button"></input> <span class="username">webdev18</span>&nbsp;&nbsp;&nbsp;&nbsp;33 points&nbsp;&nbsp;18 minutes ago </p> <div class="main-content"> <p class="contain-com"> ...both comments collapse. </p> <p class="bottomtext"> <img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond </p> </div> </div> </div>