Hide isn't working in IE

Hide isn't working in IE

Hi,

This code works fine in Firefox, but in IE the fields don't "hide".  I have a pull-down menu that is supposed to allow the user to hide or display two form fields.  Any help is appreciated.

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.4.2.js"></script>
  4. <script type="text/javascript" src="jquery.validate.js"></script> <!-- version 1.6 -->
  5. <script type="text/javascript"> 
  6. $(document).ready(function() {
  7.     $("#hideornot").change(function(){
  8.         var hideornot = $("#hideornot").val(); 

  10.         if (hideornot == "Y") {
  11.             $('#val2').hide('slow');            
  12.             $('#val3').hide('slow');
  13.         } else {
  14.             $('#val2').show('slow');
  15.             $('#val3').show('slow');
  16.         }
  17.     });
  18. }); 
  19. </script> 

  21. </head>
  22. <body>
  23.   <form action="thanks.html" method="post" >
  24.     <fieldset>
  25.       <ul>
  26.         <li><label for="hideornot">Hide or not?</label>
  27.           <select name="hideornot" id="hideornot">
  28.             <option value="Y" selected>Yes</option>
  29.               <option value="N">No</option>
  30.             </select>
  31.         <div id="val2">
  32.           <li><label for="val2">Val 2</label><input type="text" />
  33.         </div>
  34.         <div id="val3">
  35.           <li><label for="val3">Val 3</label><input type="text" />
  36.         </div>
  37.         <li><input class="submit" id="submit" type="submit" value="Submit">
  38.       </ul>
  39.     </fieldset>
  40.   </form>
  41. </body>
  42. </html>