Facebook like Expanding Textbox with Jquery.

Hey people! Here is a tutorial that shows you how to create a expanding text box similar to the status update box on facebook using jQuery. 

You can have a look at the demo and also download the script from the links below:

               DOWNLOAD                DEMO

Javascript 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>

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