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

$("textarea").focus(function(){
    $("textarea").animate({ height: "70px" }, 500);
});

default css

textarea{ height: 50px;}

on focus textarea height will increase :) simple jquery

Answer 2

<textarea style="width:200px; height:50px;" id="ta"></textarea>

var ta = document.getElementById('ta');
ta.onclick = function(){
    this.style.height = "400px";
}  

A quick fiddle: http://jsfiddle.net/n6sgT/

Answer 3

Something like this would work...

Demo: http://jsfiddle.net/Y3rMM/

CSS...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML...

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});