Helpful Information
Category: Web Design, HTML Reference and CSS
Need cross-browser CSS for hiding/showing rows: HTML, CSS, JavaScript, PHP

I have a table with alternating hidden and permanently visible rows. When the user clicks a link on a permanently visible row, it toggles a hidden row to display and hide, which expands and contracts the table.

This is the javascript I used to make it work in Firefox:

<script type="text/javascript">
function switchMenu(obj)
var el = document.getElementById(obj);
if( != "table-row") { = "table-row"; } else { = "none";
// -->

// Link to expand the table
<a href="#" onclick="switchMenu('new_row');">Click</a>

// Invisible row
<tr id="new_row" style="display: none;"><td> . . . </td></tr>

This doesn't work in IE 6, however, because I get an error about an invalid argument. I guess "table-row" is not supported by the browser as a CSS argument. How do I get around this problem?

privacy (GDPR)