Deceptive-Logic

This tutorial will demonstrate how to use JavaScript to hide/switch the display of a form/fieldset using the onClick feature. If you find any "browser related" problems with this, or just any other kinds of errors, post in the tutorial help forums.
One thing you need to remember when going through this tutorial, I left out ALL of the <script> tags simply to save space. When you go to add any of the JavaScript from this to your site, you will have to add a start and end <script> tag for just about every one of the scripts (with one exception I pointed out in the tutorial).
I also expect you to know a little something about html, forms, and fieldsets before you even think about going through this.

Now, the tutorial is going to be handled in these six basic steps:
1. Creating the functions to hide everything.
2. Creating the fieldsets
3. Hiding everything
4. Displaying the default element
5. Creating the function to change elements
6. Using onClick to change things

Hide_all() function

The Fieldset

First off, for every one of the fieldsets you make, you need to give the <fieldset> tag a unique id that you can remember for the Hide_all() function. Then you can do what ever else you need to do. <fieldset id="set1">
<!-- <legend> is optional -->
<legend>set1</legend>
    <!-- Change the inputs to what you want -->
    <input type="text" name="blah"><br>
    <input type="checkbox" name="blah_check" value="1"> choice 1<br>
    <input type="submit">
</fieldset>
<fieldset id="set2">
<legend>set2</legend>
    <input type="text" name="more_blah"><br>
    <input type="radio" name="blah_radio" value="1"> option 1<br>
    <input type="submit">
</fieldset>

This is one of the simpler parts. To hide all of the elements in the fieldset, just add "Hide_all();" in between some script tags either in the head element, or by the fieldset somewhere, its up to you.

Displaying the default

To display a default, you'll have to edit the following code a little bit (to suit your needs), and then just add it into the above code.

Changing elements

The following function will allow you to easily change between elements. Basically, it will use radio buttons to select the element you want displayed, hides everything, and then displays the element you want.
The change() function: <!--
function change(radio, element){
    /*
    radio = the radio button that you clicked;
    element = the element the radio button's attached to
    */
    if(radio.checked){
        Hide_all();
        getElement(element).style.display = 'block';
        return true;
    }
    return false;
}
//-->

Adding the radio buttons

This form is basically what you will need/use to change between the different elements, from the above it should be basically self-explanatory.