title: Show/hide certain sections of a form using JavaScript. How to only show one section at a time?
body: <p>I have the following for set-up:</p>
  <pre><code>&lt;form action=&quot;?&quot; method=&quot;post&quot; name=&quot;contactform&quot;&gt;
  
  &lt;div class=&quot;question&quot;&gt;
      &lt;p&gt;&lt;span&gt;&lt;input type=&quot;radio&quot; name=&quot;answer&quot; value=&quot;Yes&quot; onclick=&quot;showHide('one')&quot;/&gt;&lt;/span&gt; Yes&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;one&quot; class=&quot;answers&quot; style=&quot;display:none&quot;&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason One&quot; /&gt; Reason One&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason Two&quot; /&gt; Reason Two&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason Three&quot; /&gt; Reason Three&lt;/p&gt;
  &lt;/div&gt;&lt;!-- end answers --&gt;
  
  &lt;div class=&quot;question&quot;&gt;
      &lt;p&gt;&lt;span&gt;&lt;input type=&quot;radio&quot; name=&quot;answer&quot; value=&quot;No&quot; onclick=&quot;showHide('two')&quot;/&gt;&lt;/span&gt; No&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id=&quot;two&quot; class=&quot;answers&quot; style=&quot;display:none&quot;&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason One&quot; /&gt; Reason One&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason Two&quot; /&gt; Reason Two&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason Three&quot; /&gt; Reason Three&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;radio&quot; name=&quot;answerdetail&quot; value=&quot;Reason Four&quot; /&gt; Reason Four&lt;/p&gt;
  &lt;/div&gt;&lt;!-- end answers --&gt;
  
  &lt;div class=&quot;question&quot;&gt;
      &lt;p&gt;&lt;span&gt;&lt;input type=&quot;radio&quot; name=&quot;answer&quot; value=&quot;Not sure&quot; /&gt;&lt;/span&gt; Not sure&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  <p>When you first see the form there are only 3 check boxes visible (Yes, No, Not Sure). When you click 'Yes', the sub checkboxes for 'Yes' appear and if you click 'No', the sub checkboxes for 'No' appear.</p>
  <p>I would like to know if it is possible to only show one set of sub checkboxes at a time?</p>
  <p>I.e. if somebody checks 'Yes' the sub checkboxes for 'Yes' appear. If they then change their mind and click 'No' the sub checkboxes for 'Yes' disappear and the sub checkboxes for 'No' appear (i.e. only one set of sub checkboxes is ever visible at any one time).</p>
  <p>I hope this makes sense.</p>
  <p>Any help would be greatly appreciated!</p>