Welcome to WebmasterWorld Guest from 184.73.3.107

Forum Moderators: open

toggle show/hide rows

How can I show and hide table rows?

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

5+ Year Member



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>
9:18 pm on Mar 29, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



</script>

becomes

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

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

5+ Year Member



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>
11:43 pm on Mar 29, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

combine into one, and drop the other.
12:24 am on Mar 30, 2010 (gmt 0)

5+ Year Member



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.
4:45 am on Mar 30, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



if "loading" is conditionally present

window.onload=function(){
var el = document.getElementById("loading");
if ( el ) { el.className = "loading-invisible"; }
toggle('nameit');
}
6:17 am on Mar 30, 2010 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month