jquery on input blur show / hide class -

i building html form , using jquery validate.

each input field set this:

<div class="controls">     <input type="text" class="input-xlarge" name="name" id="name">     <div class="info">&nbsp;</div>     <div class="valid" style="display:none;">&nbsp;</div> </div> 

here jquery far:

$('.controls input').blur(function() {                        if( !$(this).val() ) {                             $(this).css('border-color','red');         $(this).find('.info').css('display','none');         $(this).find('.error').css('display','inline-block'); 

the idea when user view form, info div shows. if proceed form tabbing through inputs without enetering information, error class show , remove info class.

any ideas on im going wrong?

cheers, dan

try this, need use siblings method here:

$('.controls input').blur(function () {     if (!$(this).val()) {         $(this).css('border-color', 'red');         $(this).siblings('.info').css('display', 'none');         $(this).siblings('.error').css('display', 'inline-block');     } });