JohnnyV
09-27-2005, 04:52 PM
Here's a script I have that basically allows me to have an infinate amount of hidden cells with the same id that can be expanded/contracted via an input in their header. My problem is that when you click "show" on one of them, then try to click "show" on another one, you have to click it two or three times to get it to work. Anyone know how to fix that? Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.showSwitch {
display: table-cell;
}
.hideSwitch {
display: none;
}
-->
</style>
<script type="text/javascript">
var checkflag = "false";
// Checks All Checkboxes
function showall(form, theCommonNodeName) {
theCommonNodeName = theCommonNodeName.toLowerCase();
var theCommonNode = form.parentNode;
while(theCommonNode.nodeName.toLowerCase() != theCommonNodeName && theCommonNode != document) {
theCommonNode = theCommonNode.parentNode; }
if (checkflag == "false") {
var elements = theCommonNode.getElementsByTagName("td");
for (var c = 0; elements[c]; c++)
if (elements[c].id == 'dd1')
{elements[c].className="showSwitch";}
checkflag = "true";
return "Hide";
}
else if (checkflag == "true"){
var elements = theCommonNode.getElementsByTagName("td");
for (var c = 0; elements[c]; c++)
if (elements[c].id == 'dd1')
{elements[c].className="hideSwitch";}
checkflag = "false";
return "Show"; }
}
</script>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<style type="text/css">
<!--
.showSwitch {
display: table-cell;
}
.hideSwitch {
display: none;
}
-->
</style>
<script type="text/javascript">
var checkflag = "false";
// Checks All Checkboxes
function showall(form, theCommonNodeName) {
theCommonNodeName = theCommonNodeName.toLowerCase();
var theCommonNode = form.parentNode;
while(theCommonNode.nodeName.toLowerCase() != theCommonNodeName && theCommonNode != document) {
theCommonNode = theCommonNode.parentNode; }
if (checkflag == "false") {
var elements = theCommonNode.getElementsByTagName("td");
for (var c = 0; elements[c]; c++)
if (elements[c].id == 'dd1')
{elements[c].className="showSwitch";}
checkflag = "true";
return "Hide";
}
else if (checkflag == "true"){
var elements = theCommonNode.getElementsByTagName("td");
for (var c = 0; elements[c]; c++)
if (elements[c].id == 'dd1')
{elements[c].className="hideSwitch";}
checkflag = "false";
return "Show"; }
}
</script>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<input type=button value="Show" onClick="this.value=showall(this, 'table');">
</td>
</tr>
<tr>
<td class="hideSwitch" id="dd1">
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>