Now, you can use CSS specific to the tag and className to get some pretty great results:
ul#tabbednavigation li {
border: 1px solid #999;
padding: 4px;
text-align: center;
cursor: pointer;
}
ul#tabbednavigation li.inactive {
border-bottom: 1px solid #999;
background-color: #cfcfcf;
font-size: 8pt;
}
ul#tabbednavigation li.inactive {
border-bottom: none;
background-color: #fff;
font-size: 9pt;
}
form#contact fieldset {
border: none;
width: 500px;
}
form#contact fieldset.inactive {
display: none;
}
form#contact fieldset.active {
display: block;
}
Now, you could very easily build a tabbed-based navigation "engine" that will allow a tab to trigger the conditional display on a given section in a form:
.. I'm being lazy here and not writing the looping through like-elements to grab the other tabs and making sure they're inactive (as well as their correlating fieldsets)... but you get the idea...
Just a suggestion really: switch className instead of toggling styles whenever possible.
{Link}
function toggle(id, show){
if(show) {
document.getElementById(id).clasName = "active";
} else {
document.getElementById(id).className = "inactive";
}
}
Now, you can use CSS specific to the tag and className to get some pretty great results:
ul#tabbednavigation li {
border: 1px solid #999;
padding: 4px;
text-align: center;
cursor: pointer;
}
ul#tabbednavigation li.inactive {
border-bottom: 1px solid #999;
background-color: #cfcfcf;
font-size: 8pt;
}
ul#tabbednavigation li.inactive {
border-bottom: none;
background-color: #fff;
font-size: 9pt;
}
form#contact fieldset {
border: none;
width: 500px;
}
form#contact fieldset.inactive {
display: none;
}
form#contact fieldset.active {
display: block;
}
Now, you could very easily build a tabbed-based navigation "engine" that will allow a tab to trigger the conditional display on a given section in a form:
function toggle(id, show){
var idcontainer = id + "_container";
if(show) {
document.getElementById(id).clasName = "active";
document.getElementById(idcontainer).clasName = "active";
} else {
document.getElementById(id).className = "inactive";
document.getElementById(idcontainer).className = "inactive";
}
}
.. I'm being lazy here and not writing the looping through like-elements to grab the other tabs and making sure they're inactive (as well as their correlating fieldsets)... but you get the idea...
Sorry to babble on... good stuff Jake!