title: hide / show fields based on input value
body: <p>I am trying to hide the div class " hideme" based on value of "full_day"
  if the value of "full_day" = 1, then the div class "hide me" must slide down,    if not, then div class hideme must not be visible.  what am I doing wrong  </p>
  
  <p>(I only used the section:  hideme: ("Hello Hideme") as an example to work with - in time this will be replaced with other input fields, such as checkboxes, and radio buttons)</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Conference Form&lt;/title&gt;
  
  
  
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jqueryui.js"&gt;&lt;/script&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="css/jqueryui.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  
  &lt;table width="899" border="1" align="left" cellpadding="1"&gt;
    &lt;form action="" method="get" name="myform"&gt;
  
    &lt;tr&gt;
      &lt;td width="275"&gt;&lt;label&gt;Company Name&lt;/label&gt;&lt;/td&gt;
      &lt;td width="180"&gt;&lt;input type="text" name="companyname" id="companyname" /&gt;&lt;/td&gt;
      &lt;td width="27"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="223"&gt;Enquiry Date&lt;/td&gt;
      &lt;td width="160"&gt;&lt;input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Conference Date In&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Conference Date Out&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="conference_date_out" id="conference_date_out" class="datepicker" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Total Days&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="total_days" id="total_days" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Number of Delegates&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="no_of_delegates" id="no_of_delegates" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Accommodation:&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;Check in Date&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="check_in_date" id="check_in_date" class="datepicker" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;Check out Date&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;
        &lt;input type="text" name="check_out_date" id="check_out_date" class="datepicker" /&gt;
          &lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Total Days Accommodation&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="total_days_acc" id="total_days_acc" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Number of Rooms:&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Single&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="no_of_rooms_single" id="no_of_rooms_single" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Double / Twin&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="no_of_rooms_double" id="no_of_rooms_double" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Contact Person&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="contact_person" id="contact_person" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Telephone Number&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="tel_no" id="tel_no" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Fax Number&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="fax_no" id="fax_no" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Cell Number&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="cell_no" id="cell_no" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Email&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="email" id="email" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Full Day Conference @ R260.00 p/p&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="full_day" id="full_day" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Total Cost Full Day&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="total_full" id="total_full" readonly="readonly" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Half Day Conference @ R240.00 p/p&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="half_day" id="half_day" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Total Cost Half Day&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="total_half" id="total_half" readonly="readonly" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Single Rooms @ R480.00 p/p&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="single_rooms" id="single_rooms" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Double / Twin Rooms @ R720.00 p/p&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="double_rooms" id="double_rooms" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Data Projector @ R400.00 rental p/day&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="data_proj" id="data_proj" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Sub Total&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" name="sub_total" id="sub_total" /&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td height="23"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;/form&gt;
  &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;div id="hideme"&gt;
  Hello Hideme
  &lt;/div&gt;
  
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(function() {
      $(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
      ({
          changeMonth: true,
          changeYear: true,
      });
          });
  
  
  var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
  document.getElementById('enquiry_date').value = enquiry_date;
  
  var calcDate = function() {
      var start = $('#conference_date_in').datepicker('getDate');
      var end = $('#conference_date_out').datepicker('getDate');
      var days = (end - start) / 1000 / 60 / 60 / 24 + 1;
  
      if(days==0) {days=1
      }
      if( days &gt;= 0 ) {
      document.getElementById('total_days').value = days;
      } 
          }
  
  
  $('#conference_date_out').change(calcDate);
  $('#conference_date_in').change(calcDate);
  
  
  
  var calcDateAcc = function() {
      var startacc = $('#check_in_date').datepicker('getDate');
      var endacc = $('#check_out_date').datepicker('getDate');
      var daysacc = (endacc - startacc) / 1000 / 60 / 60 / 24;
  
  
      if(daysacc==0) daysacc=1
      if( daysacc &gt;= 0 ) {
      document.getElementById('total_days_acc').value = daysacc;
      } 
          }
  
  
  $('#check_in_date').change(calcDateAcc);
  $('#check_out_date').change(calcDateAcc);
  
  function calculateFull()
  {
      var fulldays = parseInt(document.getElementById("full_day").value);
  
      var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);
  
      var fullprice = 260;
  
      var resultfull =  fulldays * no_of_delegates * fullprice;
  
      document.getElementById("total_full").value = resultfull;
      }
  
      $('#full_day').change(calculateFull).keyup(calculateFull);
  
  
      function calculateHalf()
  {
      var halfdays = parseInt(document.getElementById("half_day").value);
  
      var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);
  
      var halfprice = 240;
  
      var resulthalf =  halfdays * no_of_delegates * halfprice;
  
      document.getElementById("total_half").value = resulthalf;
      }
  
      $('#half_day').change(calculateHalf).keyup(calculateHalf);
  
  
      $(document).ready(function(){
      $("#full_day").change(function(){
  
          if ($(this).val() == "1" ) {
  
              $("#hideme").slideDown("fast"); //Slide Down Effect
  
          } else {
  
              $("#hideme").slideUp("fast");    //Slide Up Effect
  
          }
      });
  
  
  });
  
  
  &lt;/script&gt;
  </code></pre>