how to hid show divs using a radio button with js

[Cele]

<script type="text/javascript">
   function showForm(x){
    if (x == "professional") {
         document.getElementById("form1").style.visibility='visible'; 
         document.getElementById("form2").style.visibility='hidden'; 
    }
    else if (x == "distributor"){
        document.getElementById("form2").style.visibility='visible'; 
        document.getElementById("form1").style.visibility='hidden'; 
    }
   }
 
</script> <form>
  Account Type: </br> <label><input  type="radio" name = "accountType" value="public" checked>  Public  </label> </br> <label><input  type="radio" id="professional" name = "accountType" onClick="showForm(this)" value="professional">  Professional </label> </br> <label> <input  type="radio" id="distributor" name = "accountType" onCLick="showForm(this)" value="distributor">  Distributor </label> </form> </br></br> <div id="form1">
  Profession: 
  <input type="text" name = "profession"> </br>
   Company:  
  <input type="text" name = "company"> </br>
  Zip Code:   
  <input type="text" name = "zipcode"> </br> </div> <div id="form2">
   Company:  
  <input type="text" name = "company"> </br>
  Address: 
  <input type="text" name = "address1"> </br>
  Address: 
  <input type="text" name = "address2"> </br>
   City: 
  <input type="text" name = "city"> </br>
  State: 
  <input type="text" name = "state"> </br>
  Zip/Postal Code:   
  <input type="text" name = "zipCode"> </br>
   Country: 
  <input type="text" name = "country"> </br> </div>

[Horadrim]

Here, look at this:
http://jsfiddle.net/anox707h/

You might need to play with the css a bit, so you could position the lower form correctly.