title: Display/Hide input fields based on radio button selection
body: <p>I am a novice in JS and learning. Please help me in correcting the code.</p>
  <p>The inputs are:</p>
  <ol>
  <li>radio-button-1; radio-button-2;</li>
  <li>input-fields-set-1; input-fields-set-2; input-field-submit.</li>
  </ol>
  <p>What I want to achieve is:</p>
  <p>On page load only radio-button-1 and radio-button-2 will be displayed. On clicking radio-button-1 input-fields-set-1 and input-field-submit will be displayed but on clicking radio-button-2 input-fields-set-2 and input-field-submit will be displayed.</p>
  <p>The complete codes are given below. On running these on <a href="http://jsfiddle.net/" rel="nofollow noreferrer">http://jsfiddle.net/</a> its working perfectly but on a website on clicking any of the radio buttons nothing is appearing. I have uploaded the codes on <a href="https://testing2601.000webhostapp.com/" rel="nofollow noreferrer">https://testing2601.000webhostapp.com/</a> for testing purpose and there its not working.</p>
  <p>Also please note that all of the input fields in set-1 and set-2 are mandatory fields.</p>
  <p>Complete codes from the .js and .html files -</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function ageCheck() {
      if  (document.getElementById('below').checked) {
          document.getElementById('ifBelow').style.display = 'block';
          document.getElementById('ifAbove').style.display = 'none';
          document.getElementById('ifChecked').style.display = 'block';
      }
      else if (document.getElementById('above').checked) {
          document.getElementById('ifBelow').style.display = 'none';
          document.getElementById('ifAbove').style.display = 'block';
          document.getElementById('ifChecked').style.display = 'block';
      }
      else    {
          document.getElementById('ifAbove').style.display = 'none';
          document.getElementById('ifBelow').style.display = 'none';
          document.getElementById('ifChecked').style.display = 'none';
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta charset="utf-8" /&gt;
  
  &lt;/head&gt;
  &lt;body &gt;
  &lt;div&gt;
    &lt;form method="post" name="childDetails" action="example.php"&gt;
      &lt;div class="radioB"&gt;
        &lt;div class="a"&gt;
          &lt;input type="radio" onclick="javascript:ageCheck();" id="below" name="age" &gt;
          &lt;label for="below"&gt;Age of my child is below 4 years.&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="a"&gt;
          &lt;input type="radio" onclick="javascript:ageCheck();" id="above" name="age" &gt;
          &lt;label for="above"&gt;Age of my child is above 4 years.&lt;/label&gt;
        &lt;/div&gt;                                    
      &lt;/div&gt; 
      &lt;div id="ifBelow" class="set-1" style="display: none"&gt;
        &lt;div&gt;
          &lt;input type="number" id="dob" name="dob" placeholder="DOB of Child in mmddyy" required /&gt;
        &lt;/div&gt;                                        
        &lt;div&gt;
          &lt;input type="text" id="name" name="name" placeholder="Name of the child" required /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="email" id="email" name="email" placeholder="Your email" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="ifAbove" class="set-2" style="display: none"&gt;
        &lt;div&gt;
          &lt;input type="number" id="age" name="age" placeholder="Age of your child" required /&gt;
        &lt;/div&gt;    
        &lt;div&gt;
          &lt;input type="text" id="name2" name="name2" placeholder="Name of the child" required /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="text" id="hobby" name="hobby" placeholder="Hobby of your child" required /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="email" id="email-2" name="email-2" placeholder="Your email" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="ifChecked" class="set-3" style="display: none"&gt;
        &lt;div class="set-3"&gt;
          &lt;input type="checkbox" id="proud" name="proud" required&gt;
          &lt;label for="proud"&gt;I am a proud parent.&lt;/label&gt;
        &lt;/div&gt;                                    
        &lt;div&gt;
          &lt;input type="submit" name="submit" value="Submit" class="primary" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="/assets/js/main.js"&gt;&lt;/script&gt;       
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>