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 like a textfield at first then when clicked on should expand.

Answer 1

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);
});