CODEWITHSUNDEEP
jquerycsshtmlhide
Apetrei Alin
Apetrei Alin

Reputation: 19

Having many buttons and one div for each one when pressing one button the correspondent div will be shown

enter image description here

So I want when I press the first "Raspunde" button, the text box next to him to disappear, right now if I press on the first "Raspunde" button both of the textbox will disappear not just the first one.

$('.comment-reply-button').click(function () {
    $('.add-reply-container').toggle(500);
});

".comment-reply-button" is the class of "Raspunde" buttons ".add-reply-container" is the class which corresponds to textbox and button on the right side of "Raspunde" buttons

The problem is that the comment section will scale and I will have many comments, i know how to do for 2,3,4 comments but not for hundreds or more.

HTML:

<div class="comment-container">
        <div class="comment-title">
            <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
        </div>
        <div class="comment-text">
            This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to.
            Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems and not one fix.
        </div>
        <div class="comment-bottom">
            <button class="comment-reply-button">Raspunde</button>
        </div>
    </div>
    <div class="add-reply-container">
        <textarea class="add-reply-textbox" placeholder="Scrie o intrebare.." >
        </textarea>
        <button class="add-reply-button">Trimite</button>
    </div>

Upvotes: 0

Views: 53

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

try using the following code

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});



$(this) // The button you clicked on
.closest(".comment-container") // The closest element of the button with the class comment-container
.next('.add-reply-container') // find the next object with the add-reply-container class

Demo

$('.comment-reply-button').click(function() {
  $(this).closest(".comment-container").next('.add-reply-container').toggle(500);
});
.add-reply-container {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>

<br>

<div class="comment-container">
  <div class="comment-title">
    <span class="comment-creator-name">Apetrei Alin</span> • acum 10 minute
  </div>
  <div class="comment-text">
    This site has not worked properly in months. We can't page down, it freezes and directs us to places we didn't even click on and chat keeps messing up to. Repeatedly reported and it's never fixed or responded to. Months and Months of the same problems
    and not one fix.
  </div>
  <div class="comment-bottom">
    <button class="comment-reply-button">Raspunde</button>
  </div>
</div>
<div class="add-reply-container">
  <textarea class="add-reply-textbox" placeholder="Scrie o intrebare..">
        </textarea>
  <button class="add-reply-button">Trimite</button>
</div>

Upvotes: 2

Related Questions