toggle show/hide rows

Forum Moderators: open

Message Too Old, No Replies

toggle show/hide rows

How can I show and hide table rows?

steveonz

8:06 pm on Mar 28, 2010 (gmt 0)

Hey there!

I found a great code to do this, but I would like to have the row defult set to hide via the Javascript.
This is because I have many rows and I do not want to set them all to display:none and it would be easier and less bother to just set it in one place which is the JS code.

Thank you!
.................


<html> 
<head> 
<script> 
function toggle(thisname) { 
tr=document.getElementsByTagName('tr') 
for (i=0;i<tr.length;i++){ 
if (tr[i].getAttribute(thisname)){ 
if ( tr[i].style.display=='none' ){ 
tr[i].style.display = ''; 
} 
else { 
tr[i].style.display = 'none'; 
} 
} 
} 
} 
</script> 
</head> 
<body> 


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

<table border="1"> 
<tr nameit=fred > 
<td >Always Visible</td> 
</tr> 
<tr nameit=fred id="hidethis"> 
<td>Hide this</td> 
</tr> 
<tr> 
<td>s visible</td> 
</tr> 
</table> 
</script> 
</body> 
</html>

daveVk

9:18 pm on Mar 29, 2010 (gmt 0)

</script>

becomes

window.onload = function(){toggle('nameit');};
</script>

Welcome !

steveonz

10:54 pm on Mar 29, 2010 (gmt 0)

Hello, Thanks.

That is great but it affects my layers. at the start of the page I have another onload event... How can I have 2 on load events in separate scripts?

<style type="text/css">

body{height:100%}
div.loading-invisible{
display:none;
}
div.loading-visible{
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
background:#fff;
_background:none;
opacity:.75;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
padding-top:25%;
}
</style>

</head>
<body>
<div id="loading" class="loading-invisible">
<img src="images/loading.gif" border=0>
</div>
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible";
window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
}
</script>

daveVk

11:43 pm on Mar 29, 2010 (gmt 0)

window.onload=function(){
document.getElementById("loading").className = "loading-invisible";
toggle('nameit');
}

combine into one, and drop the other.

steveonz

12:24 am on Mar 30, 2010 (gmt 0)

Humm that would work fine, but the second function is variable. Whereas I only want it to load on a specific time.

The reason is the customer needs to fill out some information, if the information has already been filled out then they do not need to see the rows. However they are still able to un hide the rows.

This is why it is an issue. I have thought about putting it into css but this will permanently hide it too.

daveVk

4:45 am on Mar 30, 2010 (gmt 0)

if "loading" is conditionally present

window.onload=function(){
var el = document.getElementById("loading");
if ( el ) { el.className = "loading-invisible"; }
toggle('nameit');
}

steveonz

6:17 am on Mar 30, 2010 (gmt 0)

That is super amazing... You have no idea how much this helps! Thank you so very very much!

It did stop another layer I was using below this from working, however I think I have fixed it for now.