Question

I have a hidden div which I show using jQuery slideDown() and slideUp(). My hidden div has a form which I use and when the field is empty I set the focus using CSS, like this:

$('#form').submit(function(){
  var name = $('.name').val();
  if(name == '') {
    $('.name').focus().css({'border':'1px solid #f00'});
  }
  // here goes ajax code
  return false;
});

The form which I show is set this way:

$('.show_hidden_form').click(function(){
  $('#form_div').slideDown('slow');
});

The form is hidden this way:

$('.hide_hidden_form').click(function(){
  $('#form_div').slideUp('slow');
});

But my issue occurs when I hide the div (which it contains the form). I want it to reset the default form style.

Is this possible? If so, how can I do this?

Answer 1

Just add a callback function to slideUp:

$('.hide_hidden_form').click(function(){
   $('#form_div').slideUp('slow', function() {
       $('.name').focus().css({'border':'0'});   
   }); 
}); 

(By the way, you really should be using an ID for that “name” field instead of a class, since apparently you only have one of them.)