Trying to display events on my website based on what my clients want to view. I have 3 checkboxes setup to toggle the connected events, but I can't seem to make the onclick handle more than 1 event at a time.
Basically, I want to know
1) how to display more than one tr row'd event with the selection of any given checkbox.
2) how to have all boxes checked on the page load (checked=true only checks the box with no info showing)
3) AND/OR how to create a CHECK ALL option
4) and, lastly, how to give it a scroll in case I have many events.
<html>
<head>
<script type="text/javascript" language="javascript">
function toggle(id) {
if(document.getElementById(id).style.display=='block')
{
document.getElementById(id).style.display='none';
document.getElementById(id).style.visibility='hidden';
//alert('Its hidden now');
}
else
{
document.getElementById(id).style.display='block';
document.getElementById(id).style.visibility='visible';
//alert('Its displaying now');
}
}
</script>
<style type="text/css">
.toggleClass{
display:none;
visibility:hidden;
}
</style>
</head>
<body>
<table width=700 height=500 cellpadding=5 cellspacing=0><tr><td bgcolor=#000000 width=200 valign="top">
<form name="myform" ><br><br>
<hr size=5>
<input type="checkbox" name="checkbox" value="checkbox" onClick="toggle('3on3')"><font color="#ffffff"> 3 on 3 Tournaments</font><br>
<hr size=5>
<input type="checkbox" name="checkbox" value="checkbox" onClick="toggle('clinic')"><font color="#ffffff"> Clinics</font><br>
<hr size=5>
<input type="checkbox" name="checkbox" value="checkbox" onClick="toggle('workout')"><font color="#ffffff"> Workouts</font><br>
<hr size=5>
</td><td width=500 valign="top" bgcolor="#CCCCCC">
<table width=100% border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000">
<td height="50" width=100% bgcolor="#CCCCCC"><font size=4><b>Event Calendar</a></td>
</tr>
<tr id="3on3" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>3ON3 INFORMATION</td>
</tr>
<tr id="clinic" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>CLINIC INFORMATION</td>
</tr>
<tr id="workout" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>WORKOUT INFORMATION</td>
</tr>
<tr id="3on3" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>2nd 3ON3 INFORMATION</td>
</tr>
<tr id="clinic" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>2nd CLINIC INFORMATION</td>
</tr>
<tr id="workout" class="toggleClass">
<td height="50" width=500 bgcolor="#CCCCCC"><hr size=5>2nd WORKOUT INFORMATION</td>
</tr>
</table>
</td></tr></table>
</form>
</body>
</html>Thanks for any help!
