Contact Us

Scripts: DHTML :: Expand and Contract Effects :: Library Article #7

Developer's Section

Expanding and Contracting Input Boxes with JQuery
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (2857)

Learn a simple technique to expand and contract input boxes with JQuery.

You can create a simple expand and contract effect by using the animate function from the JQuery Library.


The code is shown below:

 Code Snippet 1

<script type='text/javascript' src=''></script> 

<script language="javascript">

$(function () {
  $("#srch_text").focus(function () {
      width: '180px',
      height: '13px'

   $("#srch_text").blur(function () {
       if($(this).val() == ""){

           width: '130px',
           height: '13px'



<input type="text" value="Search" id="srch_text" name="thisSearch"
onclick="if(this.value == 'Search'){this.value='';}"/>

See other Scripts in Expand and Contract Effects

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]