PLEASE HELP! - With Javascript slide up() / slide down() on form

Hello, I’m redoing a website form, and I want to add slide down boxes which slides down when a selection is made on a question.




---------------------------------------------------------------------------------------------------------------------------------------




This is the HTML and JavaScript I have:-

HTML - (I'm using the formee system- Sorry about unhelpful div id names)

    <div id="deadlinea" class="grid-12-12 clear">
                  <label><strong>5.</strong> Do you have a specific deadline for your project?<em class="formee-req"></em></label>
                   <select>
                      <option>Please select one</option>
                      <option>NO</option>
                      <option>YES</option>
                  </select>
          </div>
         
          <div id="DeadlineArea">
                  <div id="deadline" class="grid-12-12 clear">
                        <label>What is the deadline for your project?<em class="formee-req"></em></label>
                       <input type="text" value="" />
                  </div>
          </div>

  

Code (markup):

JavaScript

  // Beginning of function

  $(document).ready(function(){



                  // Hides the area initially 

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

  

                  // Beginning of slide code

                  $("#deadlinea").click(function(){
  
                                  // If yes selected
                                  if ($('#deadlinea').options[2])            
  
                                  // Initiate slide down on hidden box   
                                  $("#DeadlineArea").slideDown('slow');
  
                                  // Otherwise
                                  } else { 
  
                                  // Initiate slide up of hidden box
                                  $("#DeadlineArea").slideUp('slow'); 
                                  }
                  }); 
                  // End of slide code

  });
  // End of function

  

Code (markup):

The problem is with linking the slide down action with the selection.

I don't know how to do it.

Thank you in advance.

 

Use this. http://jsfiddle.net/dz5dV/2/

    <div id="deadlinea" class="grid-12-12 clear">
                  <label><strong>5.</strong> Do you have a specific deadline for your project?<em class="formee-req"></em></label>
                   <select id="select_deadline">
                      <option>Please select one</option>
                      <option>NO</option>
                      <option>YES</option>
                  </select>
          </div>
         
          <div id="DeadlineArea">
                  <div id="deadline" class="grid-12-12 clear">
                        <label>What is the deadline for your project?<em class="formee-req"></em></label>
                       <input type="text" value="" />
                  </div>
          </div>

Code (markup):

Select recieved an id

// Beginning of function
$(document).ready(function() {

    // Hides the area initially 
    $("#DeadlineArea").hide();


    // Beginning of slide code
    $('#select_deadline').change(function() {

        // If yes selected
        if ($(this).val() == 'YES') {

            // Initiate slide down on hidden box   
            $("#DeadlineArea").slideDown('slow');

        // Otherwise
        } else {

            // Initiate slide up of hidden box
            $("#DeadlineArea").slideUp('slow');

            // Clear the value if hidden again
            $("#DeadlineArea input").val("");

        }
    });
    // End of slide code

});
// End of function

Code (markup):

On the select id apply a change function. If selected = YES slidedown , else slideup and clear the input value again, so no wrong / unneeded data is sent

 

Thank you so much, that's perfect

 

Np, shoot in if more stuff is troubling you