Facebook Like Expanding TextBox with Jquery

Facebook like expanding textbox adds beauty as well as functionality to your web applications. But creating such a box is not that much easy for novice programmers. But if you try a bit then you will find that it can be created with a little trick. I have created such an expanding box for you.
The code is easy to understand. What I have done is I trapped the document.click() event. On this event I have determined the ID of the element on which click occured. If click occured on the textbox itself, just expand it without doing anything. If the click occured somewhere else on the page just animate the textbox to its previous dimensions.
Even if you find some problem in understanding this script, please write to me…
Now enjoy the live demo…



Live Demo   Download Script

Jquery Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
var expand = function ()
{
$("#comment").animate({"height": "75px"}, "fast" );
$("#btn_div").slideDown("fast");
return false;
};
var collapse = function ()
{
$("comment").animate({"height": "30px"}, "fast" );
$("#btn_div").slideUp("fast");
return false;
};

$("#comment").focus(function()
{
expand();
});

$(document).click(function(event)
{
var $thisid=(event.target).id;
if ($thisid == 'comment')
{
return false;
}
else if ($thisid == 'share_btn')
{
return false;
}
else
{
$("#comment").animate({"height": "30px"}, "fast" );
$("#btn_div").slideUp("fast");
return false;
}
});
});
</script>
<body>
<form method="post" action="">
<textarea id="comment"></textarea>
<div id="btn_div">
<input type="submit" id="share_btn" value=" Share "/>
</div>
</form>
</body>

CSS Code

#comment
{
width:450px; height:30px;
border:solid 1px #999999;
border-bottom:solid 2px #999999;
border-right:solid 2px #999999;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
padding:5px;
color:#6C6C6C;
overflow:hidden;
}
#share_btn
{
background-color:#006699;
color:#ffffff;
font-size:13px;
font-weight:bold;
padding:4px;
}
#btn_div
{
display:none;
}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

4 thoughts on “Facebook Like Expanding TextBox with Jquery

  1. Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up!..

Comments are closed.