I received a email request from my reader that asked to me how to implement Facebook like expanding textbox with Jquery. So I had developed a simple tutorial. Take a look at this live demo
Download Script 
Live DemoJavascript Code
It works with Jquery latest version 1.4.2. $('#content').focus(function(){} - content is the ID of the textbox. Using $(this).animate() expanding textbox height and using $("#button_block").slideDown() showing the update button.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});
$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});
});
</script>
//HTML Code
<form method="post" action="">
<textarea id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#content").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_block").slideDown("fast");
return false;
});
$("#cancel").click(function()
{
$("#content").animate({"height": "30px",}, "fast" );
$("#button_block").slideUp("fast");
return false;
});
});
</script>
//HTML Code
<form method="post" action="">
<textarea id="content"></textarea>
<div id="button_block">
<input type="submit" id="button" value=" Share "/>
<input type="submit" id='cancel' value=" cancel" />
</div>
</form>
CSS Code
#content
{
width:450px; height:30px;
border:solid 2px #006699;
font-size:14px;
}
#button
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#dedede;
color:#000;
font-size:13px;
padding:4px;
margin-left:10px;
}
#button_block
{
display:none;
}
{
width:450px; height:30px;
border:solid 2px #006699;
font-size:14px;
}
#button
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#cancel
{
background-color:#dedede;
color:#000;
font-size:13px;
padding:4px;
margin-left:10px;
}
#button_block
{
display:none;
}
Using testking 350-030 tutorials and testking 646-204 live demos, learn how to expand facebook textbox using jQuery. Become expert using our free testking 70-649 resources related to CSS, JavaScript and jQuery.
Very nice! Thanks for sharing. Greets from the Netherlands.
Very nice. One thing though... you should make it expand it back up if the user clicks somewher else rather than the white space IF user has not entered any text in.
Excellent, just as always!! 9 lessons is the best Jquery page I've ever found, congrats from Mexico!!!
sweet deal man...you are creating some VERY cool and useful things on this site...kudos my friend =]
@ Alberto Rechy
Thank You
@I have learn a lot from this 9 lessons.
i real appreciate Srinivas Tamada,You are so blessed.
This is wonderful post.
What about post data?
How to fetch and post SQL?
What about post data?
How to insert/fetch from database?
OK... ignoring my previous post... <_<
this sucks.
Hi Srinivas
This is an excellent one....
This is awesome. I just can't figure out how to make it work with multiple textareas....help?
nice!
I'm sorry, but this form can't send any data?! How can i fetch the post data?
Thanks for helping me
good
thanks dude..
Nice but textbox not really expanding but just scrolling ;)
Superb Srinivas Tamada, 9lessons is my fave Jquery Page. Indonesian siad Thanks for U a Lot.
Very nice script..... this will be very useful thanx
thanks for the info and explanation provided
Wow! Its nice... I'll add this trick to my website. You're awesome !
Awesome thanks! Can someone please share how to put the default "what's up" value? And have it vanish on click.
not work in IE7, getting errors on page...
Work in Firefox but not in Internet Explorer 8.
xcellent codes................
frm KkK-146
If you are searching for a more mature version here you can find one http://fer-menta.blogspot.com/2010/12/jquery-expanding-textarea.html
It is a port from a dojo widget and work very well for me ;)
I am impressed by the watermark javascript , the hiding and showing is fine , but watermark is good
I am a Mexican Too!
Hi i have problem with this script... It works perfect, but to first textarea on page. Is possible to change this script to work with multiple textareas ?
It works perfect, but to first textarea on page. Is possible to change this script to work with multiple textareas.
resume writing service