Following up on myself...
I have found one script that almost does what I want. However, I'm unsure
how to make it work for more than 2 options. Here is the basic page html
including the script so that someone may be able to help me.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function ref(object)
{
if (document.getElementById)
{
return document.getElementById(object);
}
else if (document.all)
{
return eval('document.all.' + object);
}
else
{
return false;
}
}
function expand(object)
{
var object = ref(object);
if( !object.style )
{
return false;
}
else
{
object.style.display = '';
}
if (window.event)
{
window.event.cancelBubble = true;
}
}
function contract(object)
{
var object = ref(object);
if( !object.style )
{
return false;
}
else
{
object.style.display = 'none';
}
if (window.event)
{
window.event.cancelBubble = true;
}
}
function toggle(object)
{
object = ref(object);
if( !object.style )
{
return false;
}
if( object.style.display == 'none' )
{
object.style.display = '';
}
else
{
object.style.display = 'none';
}
}
</script>
</head>
<body>
<table width="100%" border="1" cellpadding="5" cellspacing="0"
bordercolor="#000000">
<tr>
<td bgcolor="#CCCCCC">
Hide Extra Content
<select name="select" onchange="toggle('morestuff'); return false;">
<option value="Yes" selected>Yes</option>
<option value="No">No</option>
</select></td>
</tr>
<tr>
<td bgcolor="#CCCCCC">Here is some content that shows. </td>
</tr>
<tbody id="morestuff" style="display: none">
<tr>
<td bgcolor="#33FF00"><p>This is hidden content</p>
</td>
</tr>
<tr>
<td bgcolor="#FFFF00">This is hidden content </td>
</tr>
<tr>
<td bgcolor="#FF66CC">This is hidden content </td>
</tr>
</tbody>
<tr>
<td bgcolor="#CCCCCC">Here is more content that shows. </td>
</tr>
</table>
</body>
</html>
