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

Something like this would work...

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

CSS...

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

HTML...

jQuery...

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