title: jQuery button click to change display none to show wont work on form
body: <p>I have a form within a table and want to show half the form, once it is filled in the user can press a step 2 button to toggle the rest of the form underneath it in the same form and div.</p>
  
  <p>I was trying to use a div id called hideform to change the display properties to none until a button was clicked</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div id="form"&gt;
          &lt;h1&gt;Booking&lt;/h1&gt;
          &lt;p&gt;Fill in form&lt;/p&gt;
          &lt;form id="contactform"&gt;
          &lt;table id="formtable"&gt;
          &lt;tr&gt;
          &lt;td&gt;
          &lt;label class="label" for="name"&gt;Full Name&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;input class="input" id="name" type="text"&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
          &lt;td&gt;
          &lt;label class="label" for="email"&gt;E-mail Address&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;input class="input" id="email" type="email"&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
          &lt;td&gt;
          &lt;label class="label" for="date"&gt;Date&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;input class="input" type="text" id="datepicker" /&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
  
          &lt;tr&gt;
          &lt;td&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;input id="continue" type="button" class="submitbtn" value="Continue.." &gt;
  
          &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;div id="hideform"&gt;
          &lt;tr&gt;
          &lt;td&gt;
          &lt;label class="label" for="telephone"&gt;Telephone&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;input class="input" id="telephone" type="text"&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
          &lt;td&gt;
          &lt;label class="label" for="location"&gt;Location&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;input class="input" id="location" type="text"&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
          &lt;td&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;input id="submit" type="submit" class="submitbtn" value="Submit" &gt;
  
          &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/div&gt;
          &lt;/table&gt;
          &lt;/form&gt; 
  
      &lt;/div&gt;  
  
          &lt;script&gt;
          $("#submit").click(function () {
          $(".hide").show("slow");
          });    
          &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#form{
      float:left;
      background:#0b0b0b;
      padding:0 0 10px 0;
      border-radius:3px;
      width:29%;
      margin:0 15px 0 0;
  }
  
  #hideform{
      display:none;
  }
  </code></pre>