Hello, I am working on a simple collapsible table using some javascript/css. The code I have works find in IE7, but when I try to use it in FireFox, there are several problems. The main problem is that once a row is visible and then hidden again, the space for that row remains, so there are large lines of blank space throughout the page. I have been unable to determine what is causing this, so I'm hoping someone here can. Below is my sample code. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" <head>
<title>title</title>
<script type="text/javascript">
function changeVisibility(childClass)
{
rows=document.getElementById('mainTable').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
if(rows.className == childClass + "h")
{
rows.className = childClass + "v";
rows.style.display = "block";
}
else if(rows.className == childClass + "v")
{
rows.className = childClass + "h";
rows.style.display = "none";
}
}
}
</script>
</head>
<body>
<table id="mainTable">
<tr>
<td> <a href="#" onclick='changeVisibility("Child1")'>+</a></td>
<td> Parent 1 </td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.1</td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.2</td>
</tr>
<tr>
<td> <a href="#" onclick='changeVisibility("Child2")'>+</a></td>
<td>Parent 2</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<html xmlns=" <head>
<title>title</title>
<script type="text/javascript">
function changeVisibility(childClass)
{
rows=document.getElementById('mainTable').getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
if(rows.className == childClass + "h")
{
rows.className = childClass + "v";
rows.style.display = "block";
}
else if(rows.className == childClass + "v")
{
rows.className = childClass + "h";
rows.style.display = "none";
}
}
}
</script>
</head>
<body>
<table id="mainTable">
<tr>
<td> <a href="#" onclick='changeVisibility("Child1")'>+</a></td>
<td> Parent 1 </td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.1</td>
</tr>
<tr class="Child1h" style="display:none">
<td> </td>
<td>Child 1.2</td>
</tr>
<tr>
<td> <a href="#" onclick='changeVisibility("Child2")'>+</a></td>
<td>Parent 2</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
<tr class="Child2h" style="display:none">
<td> </td>
<td>Child 2.1</td>
</tr>
</table>
</body>
</html>
