Reply to comment

Question

I am trying to create a similar comment system on YouTube. What would be the easiest way to make the textarea answer appear below the comment when a button is clicked? I assume that duplicating textarea and making it display:none for each comment is required.

With textarea

 <div class="comment"> <p>Bla bla</p> <a hred="" id="reply">Reply</a> <textarea class="reply"></textarea> </div> 

Without textarea

 <div class="comment"> <p>Bla bla2</p> <a hred="" id="reply">Reply</a> </div> 

JQuery

 $('#reply').click(function(){ } 

Answer 1

Sort of

 $('#reply').click(function(){ $(this).parent().append($('<textarea>').attr('class','reply')); }); 

must do the job.

Answer 2

Depending on the answer @ user1419007.

It already tests if you already have a text box under the comment. If so, it will be sent.

 $('.reply').click(function(){ if($(this).parent().find('textarea').length < 1) { $(this).parent().append($('<textarea>').attr('class','reply')); } else { alert('Sending: ' + $(this).parent().find('textarea').val()); } });​ 

Here is an example on JSFiddle

Answer 3

Identifiers must be unique, so you do not need to have multiple #reply s. Instead, you can add a class to each.

 <div class="comment"> <p>Bla bla</p> <a hred="" class="reply-button">Reply</a> </div> 

 $('.reply-button').click(function(){ $(this).after($('<textarea>').attr('class','reply-box')); });