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

Answer 1

This can be done without the use of JavaScript/jQuery, using CSS transitions.

textarea {      height: 1em;      width: 50%;      padding: 3px;      transition: all 0.5s ease;  }    textarea:focus {      height: 4em;  }

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

Answer 2

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