Hide and Unhide using CSS and Javascript

There is a bunch of fancy ways to hide and unhide content in HTML. But nothing beats the simple approach. Sure, AJAX can make things slide nice and smooth for an extra level of polish, but there is something to be said for the simple approach. On one of the sites I maintain, I had to make a combined form. The content of the form needed to change based on the answer to the first question. But a lot of the information was the same between the forms. So, instead of making 2 forms I combined them and made the information “dynamically change” based on the answer to the first question. The page I’ll refer to is here.

So first thing’s first. You have to setup your elements in such a way they can be easily edited. For Forms I set both a class and an ID tag. I use the class for styling the look and I use the ID tag for changing the style in validation or in hide/unhide for those dynamic forms:

<span class="mainForm" id="fieldBox_4">
<label class="formFieldQuestion">Credentials/Degrees:</label><br><input class=mainForm type=text name=field_4 id=field_4 size='50' value=''><br></span>

One important thing to note is that all line spacing tags <br> are within the <span> tag. This way you don’t end up with ghost line breaks on your page.

<script type="text/javascript" language="JavaScript">
<!--
function ShowInd()
{
document.getElementById('fieldBox_4').style.display = "block";
document.getElementById('fieldBox_16').style.display = "block";
document.getElementById('fieldBox_17').style.display = "block";
document.getElementById('fieldBox_18').style.display = "block";

document.getElementById('fieldBox_5').style.display = "none";
document.getElementById('fieldBox_6').style.display = "none";
document.getElementById('fieldBox_7').style.display = "none";
document.getElementById('fieldBox_19').style.display = "none";
}
function ShowOrg()
{
document.getElementById('fieldBox_5').style.display = "block";
document.getElementById('fieldBox_6').style.display = "block";
document.getElementById('fieldBox_7').style.display = "block";
document.getElementById('fieldBox_19').style.display = "block";

document.getElementById('fieldBox_4').style.display = "none";
document.getElementById('fieldBox_16').style.display = "none";
document.getElementById('fieldBox_17').style.display = "none";
document.getElementById('fieldBox_18').style.display = "none";
}
//-->
</script>

Now you need to set your beginning state for all of your id tags. I do these right on the page. If you do them in a separate style sheet you can run into problems if you use the same names over and over. I use the display element since it has a more universal appearance across the browsers than the visibility element. Setting display to block makes it visible and setting it to none, makes it disappear.

<style>
#fieldBox_4, #fieldBox_16, #fieldBox_17, #fieldBox_18
{
display: block;
}
#fieldBox_5, #fieldBox_6, #fieldBox_7, #fieldBox_19
{
display: none;
}
</style>

Now we need to setup some javascript to turn these on and off. One function for each state. Make sure you turn off and on all fields that are affected for both states.

And finally add the trigger on your initial question to call the functions.

<span><input name="field_1" type="radio" class="mainForm" id="field_1_option_1" onMouseDown="ShowInd() " value="an individual" checked="checked" /><label class=formFieldOption for="field_1_option_1">an individual</label><br><input name="field_1" type="radio" class="mainForm" id="field_1_option_2" onMouseDown="ShowOrg() " value="an organization" /><label class=formFieldOption for="field_1_option_2">an organization</label></span>