Increasing and decreasing size of search box with jquery
<p>I have a search box which when you click it, it increases in width, if you click outside of it, it checks to see if there is a value, and if not, decrease back to the original size.</p>

<p>I thought the following code would do the trick, but it does a little more than expected - ie you can keep clicking the box and it will just keep growing :D</p>

<p>ie </p>

<pre><code>$('#search').live('click',function(){

    $(this).animate({width:'+=60px'},300);

}).live('blur',function(){

    if($(this).val() == '') {

        $(this).animate({width:'-=60px'},300);

    }

});
​
</code></pre>

<p>I made a JS fiddle of the situation 
<a href="http://jsfiddle.net/7V93H/" rel="nofollow">http://jsfiddle.net/7V93H/</a></p>

<p>How would one go about turning this into a toggle so that it performs properly?</p>
