if I hide a panel using jQuery how can the settings be restored?

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

You can make a class that contains the default styles of this form and another one (or more classes) to describe other states (ie NOT DEFAULTS) and then use

 $('#myForm').addClass('submitted')

and

 $('#myForm').removeClass('defualt')

:)

Answer 2

Just toggle classes instead. Toggling class is recommended because it is faster, easier to maintain and separates your styling from your code.

 //add to your css file
 border { border: 1px solid #f00; }

 //when focus show the border
 $('.name').focus().addClass('border');

 //when unfocus remove the border
 $('.hide_hidden_form').click(function(){
   $('#form_div').slideUp('slow');
   $('.name').removeClass('border');
 });

Answer 3

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.)