Toggle table-row, FireFox ignoring colspan

[the penguin]

Hello, I'm using the below code to toggle show / hide a table row, but firefox is ignoring the colspan="2". Perhaps someone can help me in altering the javascript. I appreciate the help!

SCRIPT:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = 'block';
break;
case 'block' :
img.src = 'icon_plus.gif';
el.style.display = 'none';
break;
default:
img.src = 'icon_minus.gif';
el.style.display = 'block';
break;
}
}
</script>

HTML:


<table>
<tr>
<td>Email Address</td>
<td>aaaaaaa@aa.com <img src="icon_plus.gif" border="0" id="1_img" /> <a href="javascript:toggle('1')">Change email address</a></td>
</tr>
<tr style="display:none;background-color:#DDE1EA;" id="1">
<td colspan="2">data to change email address</td>
</tr>
</table>

[jscheuer1]

The native/default style display value for a seen tr element technically is not 'block'. It's 'table-row'. But using that may confuse IE.

However, by setting the display property to an empty string, one may allow it to revert to whatever the browser considers to be its default value:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = '';
break;
case '' :
img.src = 'icon_plus.gif';
el.style.display = 'none';
break;
default:
img.src = 'icon_minus.gif';
el.style.display = '';
break;
}
}
</script>

This may be condensed:


<script>
function toggle(el) {
if(typeof(el) == 'string')
el = document.getElementById(el);
var img = document.getElementById(el.id + '_img');
switch(el.style.display) {
case 'none' :
img.src = 'icon_minus.gif';
el.style.display = '';
break;
default:
img.src = 'icon_plus.gif';
el.style.display = 'none';
}
}
</script>

[the penguin]

Amazing!

I knew table-row was the default display, but had no idea that leaving the display blank would allow each browser to choose.

Works like a charm now.

Thank you John!!!