Switching hide and show in html form

[devdas]

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.HTML Form \[code\]<form> <fieldset> <legend>Lets switch</legend> Mode 1 <input type="radio" class="modeClass" name="change_mode" value="http://stackoverflow.com/questions/15595905/Text box"> Mode 2 <input type="radio" class="modeClass" name="change_mode" value="http://stackoverflow.com/questions/15595905/Radio buttons"> <br> <div id= "text_form"> <label class="hidden"> Name:</label> <input type="text" class ="hidden"><br> <label class= "hidden"> Email:</label> <input type="text" class ="hidden"><br> <label class= "hidden"> Date of birth:</label> <input type="text" class ="hidden"> </div> <div id="radio_form"> <input type="radio" name="sex" class ="hidden" value="http://stackoverflow.com/questions/15595905/male"><label class="hidden">Male</label> <input type="radio" name="sex" class="hidden" value="http://stackoverflow.com/questions/15595905/female"><label class= "hidden">Female</label> </form> </fieldset></form> \[/code\]CSS\[code\]<style>.hidden { display:none;} </style>\[/code\]JQuery \[code\] $(document).ready(function(){ /*Getting the value of the checked radio buttons*/ $("input:radio[class=modeClass]").click(function() { var value = http://stackoverflow.com/questions/15595905/$(this).val(); /* console.log(value);*/ if(valuehttp://stackoverflow.com/questions/15595905/=="Text box") { $("#text_form").css("display","block"); /* console.log("Time to call input box");*/ } if(valuehttp://stackoverflow.com/questions/15595905/=="Radio buttons") { $("#radio_form").css("display","block"); } }); });\[/code\]Any idea suggestions will be highly appreciated.