JQuery test if Div has been hidden and clear form fields if it has been hidden

I have a number of div's that can be expanded using:

$('.adddriver1').click(function(){
$("#additionaldriver1").slideToggle();
return false;
});

I just change the div id as I need to. The fields in this div can then be filled out.

If the person clicks the button to hide the div I need to check if anything was entered and then clear the fields. I am trying:

$("#additionaldriver1").change(function(){
if($("#additionaldriver1").is(":hidden")){
$("#Driver2FirstName").val('');
$("#Driver2LastName").val('');
}
});

The html is:

     <a href="#"><img src="images/adddriver.gif" alt="" width="203" height="20" border="0" class="adddriver1" /></a>
</div>

<div id="additionaldriver1">
    <开发者_JAVA百科;h1>Section 2.2 - <span>Additonal Driver 1 Information</span></h1>
    <table width="100%" border="0" cellspacing="3" cellpadding="3">

      <tr>

        <td width="34%" valign="middle"><strong>Additional Driver 1 </strong></td>
        <td colspan="2" valign="middle">&nbsp;</td>
      </tr>
    </table>
</div>

But it does not clear the fields. Any help would be appreciated Thanks in advance, Warren

---

Is $("#additionaldriver1") a div? If it is I don't think it will fire a change event. You'd be better calling your hide code in a callback from the slidetoggle function (code below not tested) -

$("#additionaldriver1").slideToggle('medium',function () {
  if($("#additionaldriver1").is(":hidden")){
    $("#Driver2FirstName").val('');
    $("#Driver2LastName").val('');
  }
});

---

Utilize the callback:

$('.adddriver1').click(function(){
    $('#additionaldriver1').slideToggle('slow',function(){
        if($(this).is(':hidden'))
        {
            $('#Driver2FirstName').val('');
            $('#Driver2LastName').val('');
        }
    });
});