jQuery Forum

hi all,
I still pretty fresh to jquery but im making a form and i want a certain div of the form to slide down when a certain checkbox is checked and then slide back up if the check box is unchecked. I thought i had it but i cant figure out why it wont slide out. so here's the situation:

So in my js file I hide the the div that i want to slide up and down so that initially, the div does not show. This much is working.

    $("#departureArea").hide();


Now the next thing is getting it so that when this checkbox in my html code is checked...

    <label for="departure">Airport Departure</label>
    <input type="checkbox" class="departure" id="departure" value="departure" name="departure" />


... then this div in my html will slide down from its hidden state...

    <div id="departureArea">
          <label for="departureFlight">Flight #</label>
          <input class="half" id="departureFlight" type="text"  name="departureFlight"  />
    </div>


... using this bit of js.

        $('#departure').click(function(){
            if ($('#departure:checked').val() == 'on') {
                $("#departureArea").slideDown();
            } else {
                $("#departureArea").slideUp();
            }
        });


I think that i'm not correctly targeting the checkbox with

$('#departure').click(function(){

... I'm using the checkbox id in the above js code '#departure' , but i also tried tried using the checkbox class and name...and nothing worked.... and i've double checked that im all linked up to my js files and the jquery file and all that other little stuff...



Here is the entire js page in full context:

$(document).ready(function(){
   
   $("#reservations-form").validate();
   
   $(".yay, .oops").hide();
   $(".yay, .oops").fadeIn(2000);


$("#departureArea").hide();

$("#arrivalArea").hide();
       

    $('#departure').click(function(){
        if ($('#departure:checked').val() == 'on') {
            $("#departureArea").slideDown();
        } else {
            $("#departureArea").slideUp();
           
        }
    });
   

   
    $('#arrival').click(function(){
        if ($('#arrival:checked').val() == 'on') {
            $("#arrivalArea").slideDown();
        } else {
            $("#arrivalArea").slideUp();
        }
   
   });
});
   

Thanks peeps... mucho appreciate any help