Issue with my CSS that I can't seem to figure out

Question

I can't seem to figure this one out. My web page at http://rayku.com/start has a text box that will expand a form below it when someone starts to type in it:

expanded form http://snpr.cm/iurnmx.jpg

How it should work is that if you de-select from the text box without typing anything, it would go back to its original state. However, it seems to be working too well that if I click anything on the form itself below it, it would return to its original state.

How do I change it so that it will only go back to its original state if I don't type anything in the text box and I don't click anywhere on the form below it?

Thanks!

Answer 1

You need to check the value of the field before allowing a 'close' animation. Something like this:

//store object in var for efficiency
var mainQuestion = $('.main-question input');
var initialValue = mainQuestion.val();

mainQuestion.focus(function(){
    //blank out field on focus
    if(mainQuestion.val() == initialValue){
        mainQuestion.val('');
    }
    //animate opening here
});

mainQuestion.blur(function(){
    //check to see if user has typed anything in
    if((mainQuestion.val() == initialValue) || !mainQuestion.val().length ){
        //reset value
        mainQuestion.val(initialValue);
        //animate closing here
    }
});