Hide then onclick Show Table Rows

JavaScript
1

I have the following code which I got from user FauxPas and it works great. But I need one that hides by default and then toggles to SHOW the rows. Does anyone know how to alter this? I have tried just about everything and simply swapping the values doesn’t work, setting a default style doesn’t work either. FYI… this will be used in a recordset.


<html>
<head>
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>
</head>
<body>

<span onClick="toggle();">toggle</span><br /><br />

<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>
2

You need a small change to your JS:


function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = 'table-row'; // set to table-row instead of an empty string
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}

and amend your html slightly:


<tr id="hidethis" style="display:none;">
<td>Hide this</td>
</tr>
3

Jeez… I knew it was simple. THANK YOU!!!