Question

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">
    <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

Answer 1

Utilize the callback:

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