Question

I am using the function below to toggle comment boxes in an activity feed. What should happen is that the word “Comment” is clicked and the comment box becomes visible.

This is only happening for the first element in the list. If I click on the word “Comment” on any entry besides the first, the first comment_box toggles.

How can I get each comment box to toggle individually? Also, what is this issue called in jQuery? I tried to look it up but didn’t know what to call it.

jQuery

$(function(){

    $('span#comment_box').hide();

    $('.comment').click(function() {

    $('#comment_box').toggle();

    });
  });

HTML

<span href="" class="comment">Comment</span><br />
    <span id="comment_box"><textarea name="status_comment"  /></textarea><br /></span>

Here’s the jsfiddle – http://jsfiddle.net/jpBE3/

Answer 1

First of all the id should be unique for each element on the page. May be you have multiple elements with same id so you are facing this issue. jQuery will return the first element which has the required id when you use $('#comment_box').

Instead of id I would suggest you use class and then you can select the element by its class name. You have to use nextAll passing the required selector to find the corresponding element and the call toggle method on it.

Markup change

<span href="" class="comment">Comment</span><br />
<span class="comment_box"><textarea name="status_comment"  /></textarea><br /></span>

JS

  $(function(){
       $('span.comment_box').hide();
       $('.comment').click(function() {
           $(this).nextAll('.comment_box:first').toggle();
       });
  });