how to expand a text area when click on

Question

Im working on a small project which has a textarea and i need help in making the text area expand on mouse click like that of twitter and facebook. the textarea should look lik

Answer 1

Based in doog abides comment using jQuery, I enhanced the code to autoadjust approximately the number of rows acording to the length of the content, and return to 1 when focus is lost.

HTML:

jQuery:

$('textarea.expand').focus(function () {
    $(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
    $(this).animate({rows: 1}, 500);
    //Resize back to one row if the textarea is manually resized via the handle
    $(this).css({height: ''});
    $(this).css({width: ''});
});