title: Switching hide and show in html form
body: <p>I wanted to show and hide the visibility of the html form. I have 2 modes when mode 1 is selected then the form should show up with the text box and when mode 2 is selected the form with radio buttons should show up and mode 1 should be hidden and initially everything is hidden. This is what I have done so far but my css with jQuery is not able to apply.</p>
  
  <p>HTML Form </p>
  
  <pre><code>&lt;form&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Lets switch&lt;/legend&gt;
       Mode 1 
      &lt;input type="radio" class="modeClass" name="change_mode" value="Text box"&gt;
       Mode 2  
      &lt;input type="radio" class="modeClass" name="change_mode" value="Radio buttons"&gt; &lt;br&gt;
      &lt;div id= "text_form"&gt;
     &lt;label class="hidden"&gt; Name:&lt;/label&gt; &lt;input type="text" class ="hidden"&gt;&lt;br&gt;
     &lt;label class= "hidden"&gt; Email:&lt;/label&gt; &lt;input type="text" class ="hidden"&gt;&lt;br&gt;
      &lt;label class= "hidden"&gt; Date of birth:&lt;/label&gt; &lt;input type="text" class ="hidden"&gt;
      &lt;/div&gt;
     &lt;div id="radio_form"&gt;
     &lt;input type="radio" name="sex" class ="hidden" value="male"&gt;&lt;label  class="hidden"&gt;Male&lt;/label&gt;
     &lt;input type="radio" name="sex" class="hidden" value="female"&gt;&lt;label class= "hidden"&gt;Female&lt;/label&gt;
     &lt;/form&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>&lt;style&gt;
  .hidden 
  {
  
    display:none;
  
  } 
  &lt;/style&gt;
  </code></pre>
  
  <p>JQuery </p>
  
  <pre><code> $(document).ready(function(){
  
      /*Getting the value of the checked radio buttons*/
      $("input:radio[class=modeClass]").click(function() {
         var value = $(this).val();
       /*  console.log(value);*/
      if(value=="Text box")
      {
  
      $("#text_form").css("display","block");
     /* console.log("Time to call input box");*/
      }
  
      if(value=="Radio buttons")
      {
  
      $("#radio_form").css("display","block");
  
      }
  
  
      });
  
      });
  </code></pre>
  
  <p>Any idea suggestions will be highly appreciated. </p>