when i click on this textbox it gets big but when i click away how do i make it go back to normal?

Question

i'm basically mimicking the share button feature on facebook with jquery and what im trying to do is when i click on the textbox area the textbox gets larger by height. and when i click away it should get back to normal. with the last piece of jquery the code doesnt work at all. what are my options in getting this to work? thanks.


ps:
i know most of this can be done with css but i'm experimenting with jquery to better learn it. :)

here is my jquery.

$(function() {

  $('input[name=search]').click(function() {

    $(this).addClass('txthover');
  });

  $('body').click(function() {

      $('input[name=search]').removeClass('txthover');
  });

});

the html

<div id="box">
<div id="search">
<input type="text" name="search" /><input type="button" name="btnsearch" value="search" />
</div>
</div>

Answer 1

The proper way to do it would be to use the focus and blur events of the element:

$('input[name=search]').focus(function() {
    $(this).addClass('txthover');
}).blur(function() {
    $(this).removeClass('txthover');
});

Here is a quick example.