I'm trying to create a similar ments system to YouTube. What would be the easiest way of making a reply textarea appear under a ment when the button is clicked? I assume duplicating the textarea and making it display:none for each ment is not necessary.

With textarea

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

Without textarea

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

jQuery

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

}

I'm trying to create a similar ments system to YouTube. What would be the easiest way of making a reply textarea appear under a ment when the button is clicked? I assume duplicating the textarea and making it display:none for each ment is not necessary.

With textarea

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

Without textarea

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

jQuery

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

}

• javascript
• jquery

Share Improve this question Follow edited Nov 26, 2012 at 15:08 user2428118 8,12444 gold badges4646 silver badges7373 bronze badges asked May 26, 2012 at 15:31 dominodomino 7,3451313 gold badges3939 silver badges5050 bronze badges 2

• meh. in the time it took me to type the answer, two other people had already posted near identical answers. – Spudley Commented May 26, 2012 at 15:44
• @Spudley that just says that the question was to easy. – e382df99a7950919789725ceeec126 Commented May 26, 2012 at 15:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Something like

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

should do the job.

Depending on @user1419007 answer.

It already tests if you already have an textarea under the ment. If this is the case it will be send.

$('.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

IDs are supposed to be unique, so you shouldn't have multiple #replys. Instead, you may add a class to each.

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

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