Show/Hide Tables

I have a combo box with about 11 different options, each resulting in its own set of sub-options. So, if combo box value “1” is selcted, you’ll see “table1” only, but not the others. It’s classic hide/display and it works, but by the time I add in all 11 options, the code is quite long. Can anyone tell me how to accomplish the same thing using fewer lines of code? (Note the example below only includes 3 of the options, not all 11.) Many thanks.

ASP

[CODE]
vFunction= stripquotes(Request.Form(“cboFunction”))
[/CODE]

HTML

[CODE]
<select name=”cboFunction” onChange=”displayFunctions(this);”>
[INDENT]<option></option>
<option value=”1″>Reconcile</option>
<option value=”2″>Sort</option>
<option value=”3″>Controls</option>[/INDENT]
</select>

<!–Reconcile table: Option value 1 –>
<table>
<tbody id=”tblReconcile” name= “tblReconcile” style=”display: <%If vFunction <> 1 Then Response.Write “none”%>”>
<tr><td></td></tr></tbody>
</table>

<!–Sort table: Option value 2 –>
<table>
<tbody id=”tblSort” name= “tblSort” style=”display: <%If vFunction <> 2 Then Response.Write “none”%>”>
<tr><td></td></tr></tbody>
</table>

<!–Controls table: Option value 3 –>
<table>
<tbody id=”tblControls” name= “tblControls” style=”display: <%If vFunction <> 3 Then Response.Write “none”%>”>
<tr><td></td></tr></tbody>
</table>

[/CODE]

Javascript

[CODE]
function displayFunctions(obj)
{
var Function = obj.options[obj.selectedIndex].value;

//Reconcile

if (Function == 1)
{
[INDENT]document.getElementById(“tblReconcile”).style.display = “”;
document.getElementById(“tblSort”).style.display = “none”;
document.getElementById(“tblControls”).style.display = “none”;[/INDENT]
}

//Sort

else if (Function == 2)
{
[INDENT]document.getElementById(“tblSort”).style.display = “”;
document.getElementById(“tblReconcile”).style.display = “none”;
document.getElementById(“tblControls”).style.display = “none”;[/INDENT]
}

//Controls

else if (Function == 3)
{
[INDENT]document.getElementById(“tblControls”).style.display = “”;
document.getElementById(“tblReconcile”).style.display = “none”;
document.getElementById(“tblSort”).style.display = “none”;[/INDENT]
}
}
[/CODE]

Also in #JavaScript _↴