Facebook like jQuery Expanding Textbox

This is a great facebook copy of an expanding text box.
View it in action, in the video below.

Watch in full screen for best results.

First we need to include the jQuery library and the css file.
We use the focus function on the #content (textarea) to trigger the animation.
We use the animation function to achieve the height animation. Set the height and the speed. Next we use the slideDown api to slide the #button_hide down, with a fast speed. This is what shows the buttons. We use the animation function to set the height back to the original size. Next we use the slideUp api to slide the #button_hide up, to hide the buttons. Here is the html setup. We have our textarea with #content id. Next our div with #button_hide id. Then the buttons. Here is the style. style.css file Conclusion So what happens is, when the textarea is clicked the textarea expands to the height of 105px. When the submit button or cancel button are clicked, the textarea collapses back to its original size. Which is 50px. So that’s how easy it is to make an expanding textarea.

Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">