title: hide parts of form until certain fields are filled in
body: <p>Please help me with my code.  I'm trying to hide some fields until all other fields are filled in.</p>
  
  <p>Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="group1"&gt;
  
          &lt;label&gt;Field 1:&lt;/label&gt;
          &lt;input type="text" class="field1"/&gt;&lt;br/&gt;
          &lt;label&gt;Field 2:&lt;/label&gt;
          &lt;input type="text" class="field2"/&gt;&lt;br/&gt;
          &lt;label&gt;Field 3:&lt;/label&gt;
          &lt;input type="text" class="field3"/&gt;&lt;br/&gt;
  
  &lt;/div&gt;
  
  &lt;div id="group2"&gt;
  
         &lt;label&gt;Field 4:&lt;/label&gt;
         &lt;input type="text" class="field4"/&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#group2 {
      visibility: hidden;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>$(".field1",".field2",".field3").keyup(function () {
      if ($(".field1",".field2",".field3").val() != "") {
          $("#group2").css("visibility", "visible");
      } else {
          $("#group2").css("visibility", "hidden");
      }
  });
  </code></pre>