show/hide row by clicking on -/+ [Archive]

View Full Version : show/hide row by clicking on -/+

AlexMC

12-10-2002, 10:25 PM

Why doesn't this work on Mozilla ???

<html>
<head>
<script langauge="javascript">

</script>
<style>

</style>
</head>
<body>

<table border=1 cellspacing=1 cellpadding=5>
<tr>
<td><a style="cursor:hand" onclick="show('1')"><img name="img1" border="0" src="images/plus.gif" width="10" height="10"> Topic 1</a></td></tr>
<tr id="tr1" class="hide">
<td>Information for Topic 1 here</td>
</tr>
<tr>
<td><a style="cursor:hand" onclick="show('2')"><img name="img2" border="0" src="images/plus.gif" width="10" height="10"> Topic 2</a></td></tr>
<tr id="tr2" class="hide">
<td>Information for Topic 2 here</td>
</tr>
<tr>
<td><a style="cursor:hand" onclick="show('3')"><img name="img3" border="0" src="images/plus.gif" width="10" height="10"> Topic 3</a></td></tr>
<tr id="tr3" class="hide">
<td>Information for Topic 3 here</td>
</tr>
</table>
</body>
</html>

Is it possible to make it work? How?
I'm starting to hate mozilla

Thanks in advance for your time.

glenngv

12-11-2002, 01:51 AM

you have to reference an id with document.getElementById(id). IE is forgiving on this but not NS6/Mozilla.
and also, eval() is not necessary. Avoid using it as much as possible.

function show(rowID) {
var tr = document.getElementById('tr'+rowID);
if (tr.className=="hide") {
tr.className="show";
document.images['img'+rowID].src="images/minus.gif";
}
else {
tr.className="hide";
document.images['img'+rowID].src="images/plus.gif";
}
}

AlexMC

12-11-2002, 10:08 AM

With the new code the row shows and Hides, but the table get's all messed up in mozilla :(

It expands ok but when you click again to hide it it leaves a blank space :(

Is it fixable??