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

You can do this with CSS only using position: absolute, which will make it float over other elements, and the :focus selector, which will be applied only when the element have the focus. First you need to reserve the textarea size enclosing it in an element:

div.textarea {
   height: 50px;
   width: 400px;
}

Then style the unfocused textarea

textarea {
   position: absolute;
   height: 50px;
   width: 400px;
   transition: all 200ms;
}

And finally the focused one

textarea:focus {
   z-index: 1001;
   min-height:250px;
}

Fiddle: http://jsfiddle.net/7v60su9e/