Topic awaiting preservation: show/hide a table row (Page 1 of 1)

I have an example of what I'm trying to do here and it works fine in IE but really screws the pooch in Firefox. I've tried the few different things that my limited javascript knowledge will allow so I'm here to ask you guys.

What do I need to do to make this work as well in Firefox as it does in IE?

Here's the js:

<script language="javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'inline') {
state = 'none';
}
else {
state = 'inline';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>

and the html that I'm trying to show/hide:

<td><a href="#" onclick="showhide('div1');">Show/Hide</a></td>
</tr>
<tr id="div1" style="display: none;">
	<td colspan="4">
<table width="100%"  border="1">
<tr>
	<th width="50%">Answer Text</th>
	<th width="25%">Answer Type</th>
	<th width="25%">Edit Answer</th>
</tr>
<tr>
	<td>Under 18</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=1">Edit Answer</a></td>
<tr>
	<td>18 - 21</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=2">Edit Answer</a></td>
<tr>
	<td>21 - 30</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=3">Edit Answer</a></td>
<tr>
	<td>31 - 40</td>
	<td>Answer Type = 0</td>
	<td><a href="/admin/index.php?action=editAnswer&id=4">Edit Answer</a></td>
</tr>
</table>

I've tried inline, block and I've tried it with visibility too but nothing seems to get it to work correctly in FF.

Thanks

- Butcher -

This page works fine with me:

Note one change is that I'm calling it using

<a href="javascript: showhide('div1');">

You don't really want to use the # sign, if you want to call something using the onclick handler do

<a href="javascript: void(0)" onclick="showhide('div1');">

Also this:

if (state == 'inline') {
state = 'none';
}
else {
state = 'inline';
}

can be cleaned up to

state = ( state == 'inline') ? 'none':'inline';

.:[ Never resist a perfect moment ]:.

Table rows, cells, etc have different display types:

http://www.w3.org/TR/CSS21/visuren.html#display-prop

try "table-row".


 

Thanks for the help guys.

Bitdamaged:

I tried changing from the onclick to the javascript href like you suggested, but it still doesn't work in Firefox. It loads properly, and shows correctly the first time, but it never collapses properly.

Slime:
You were right on the money. Using table-row makes it work right as rain in Firefox, but kills it in IE. It seems like there should be a simple if else statement that will accomodate both browsers, but I've either been looking at it to long to see it... or I'm just to dense to.

Any help with combining the 2 would be appreciated.

Thanks

- Butcher -

I was right about 1 thing... There was a simple statement to do the job and between your 2 posts the answer was there right in front of me.

function showHide(id,vis)
{
  var val;
  val = (vis != 'none')?'none':((document.all && !window.opera)?'inline':'table-row');
  document.getElementById('div'+id).style.display = val;
}

I just pass it the div id number and the current display state and those 2 lines take care of the rest. In IE6 and Firefox 1.5 at least.

Thanks again for the help.

- Butcher -

(Edited by butcher on 02-07-2006 02:58)