title: JQuery hide/show divs in questionnaire
body: <p>I'm designing a questionnaire that asks a series of questions using radio buttons and check boxes. I'd like to use jQuery to reveal the questions in small chunks rather than display several questions all at once.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;p&gt;
      1a. Has this happened to you? &lt;label&gt;&lt;input id="radio1" type="radio" name="toggler" value="1" /&gt;Yes &lt;/label&gt;
      &lt;label&gt;&lt;input id="radio2" type="radio" name="toggler" value="2" /&gt;No &lt;/label&gt;
  &lt;/p&gt;
  
  &lt;div id="blk-2" class="toHide" style="display:none"&gt; &lt;!-- 1a. Choice: No --&gt;
      &lt;form name="form1" method="post" action="nextPage.html"&gt;
          &lt;input type="submit" name="Submit" value="Continue"&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="blk-1" class="toHide" style="display:none"&gt; &lt;!-- 1a. Choice: Yes --&gt;
  &lt;p&gt;
      1b. How often has this happened to you? 
  &lt;/p&gt;
  &lt;p&gt;&lt;input type="radio" name="how_often" value="day" /&gt; one of more times a day&lt;/p&gt;
  &lt;p&gt;&lt;input type="radio" name="how_often" value="week" /&gt; one of more times a week&lt;/p&gt;
  &lt;p&gt;&lt;input type="radio" name="how_often" value="month" /&gt; one of more times a month&lt;/p&gt;
      &lt;!-- Display "reveal more" button after one of the "how_often" buttons is selected --&gt;
  &lt;input type="submit" name="Submit" value="reveal more"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /blk-1 --&gt;
  
  
  
  
  &lt;div id="02a_part1_question" style="display:none"&gt;
  &lt;p&gt;
      2a. Where has this happened to you? 
  &lt;/p&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Yes&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;No&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;homeroom&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="homeroom" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="homeroom" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;cafeteria&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="cafeteria" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="cafeteria" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;academic class&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="academic_class" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="academic_class" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;before school&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="before_school" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="before_school" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="reveal more" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02a_part1_question --&gt;
  
  &lt;div id="02a_part2_question" style="display:none"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Yes&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;No&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;bus&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="bus" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="bus" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;after school&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="after_school" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="after_school" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;gym&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="gym" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="gym" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;dances&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="dances" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="dances" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="reveal more" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02a_part2_question --&gt;
  
  &lt;div id="02a_part3_question" style="display:none"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Yes&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;No&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;hallway&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="hallway" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="hallway" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;sporting events&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="sporting_events" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="sporting_events" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;bathroom&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="bathroom" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="bathroom" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;telephone&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="telephone" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="telephone" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="reveal more" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02a_part3_question --&gt;
  
  &lt;div id="02a_part4_question" style="display:none"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Yes&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;No&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;online/texting during school&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="texting_dur_school" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="texting_dur_school" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;online/texting outside of school&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="texting_out_school" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="texting_out_school" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="reveal more" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02a_part4_question --&gt;
  
  
  
  
  &lt;div id="02b_part1_question" style="display:none"&gt;
  &lt;p&gt;
      2b. Identify the online/texting programs where this has occured. (This choice will appear if "online/texting during school" or "online/texting outside of school" was selected in 2a.) 
  &lt;/p&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;Yes&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;&lt;strong&gt;No&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Facebook&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Facebook" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Facebook" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Twitter&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Twitter" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Twitter" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;IMing&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="IMing" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="IMing" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Email&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Email" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Email" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Myspace&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Myspace" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Myspace" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Texting&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Texting" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Texting" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Online Gaming&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Online_Gaming" value="Yes" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="radio" name="Online_Gaming" value="No" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="reveal more" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02b_part1_question --&gt;
  
  
  
  
  
  &lt;div id="02c_question" style="display:none"&gt;
  &lt;p&gt;
      2c. Click on the ONE place where this has happened the most. 
      &lt;br /&gt;
      (This section appears with items that were marked YES from 2a.) 
  &lt;/p&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="radio" name="2c" value="(name)" /&gt; item selected from 2a if necessary&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="radio" name="2c" value="(name)" /&gt; item selected from 2a if necessary&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="radio" name="2c" value="(name)" /&gt; item selected from 2a if necessary&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="radio" name="2c" value="(name)" /&gt; item selected from 2a if necessary&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox" name="checkbox27" value="checkbox"&gt; etc.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="checkbox" name="checkbox27" value="checkbox"&gt; etc.&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input value="Continue" type="submit"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;&lt;!-- /02c_question --&gt;
  </code></pre>
  
  <p>Here's the javascript:</p>
  
  <pre><code>$(document).ready(function() {
  
      $(function() {
          $("[name=toggler]").click(function() {
              $('.toHide').hide();
              $("#blk-" + $(this).val()).toggle();
          });
      });
  
      $(':submit').click(function() {
          $('#02a_part1_question').show();
          $('#02a_part2_question').show();
          $('#02a_part3_question').show();
          $('#02a_part4_question').show();
          $('#02b_question').show();
          $('#02c_question').show();
      });
  
  });
  </code></pre>
  
  <p>The first part (1a) works, but I can't seem to display the rest of the sections correctly.</p>
  
  <p>Any help would be appreciated. Although it's not working correctly, I've posted it here <a href="http://jsfiddle.net/mrfisherman2010/xM6Ft/1/" rel="nofollow">http://jsfiddle.net/mrfisherman2010/xM6Ft/1/</a></p>