Toggle Show/hide [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Toggle Show/hide

silent11

05-17-2005, 03:24 PM

I am trying to get some content to appear/hide when I click on a link. I also want all of these divs to be hidden when the page loads. I can do this by ading hide_all(2) in the onLoad handler for the body tag. Well, since I'm working inside of a template I have no control over the body tag.

The code below "should" work (or atleast I think) but it's not.

any help would be GREATLY appreciated.

<html>
<head>
<title>toggle</title>
<script type="text/javascript">

</script>
</head>

<body>

<h3>Blogs I Read <a href="#" onclick="toggle('outside1');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>

<div id="outside1">
<a href="http://www.blog.com/">my blog</a><br />
<a href="http://www.perl.com">perl.com</a>
</div>

<h3>Search Engines <a href="#" onclick="toggle('outside2');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>

<div id="outside2">
<a href="http://www.google.com">Google Search</a><br />

</div>
</body>
</html>

Fang

05-17-2005, 03:28 PM

} else {
target.style.display = "none";
}
}
}

onload=function() {hide_all(2);}
-->
</script>

silent11

05-17-2005, 04:35 PM

Thanks! I'd already tried that and it didn't work... because I still had <body onLoad=""> in the html.

isn't that weird that having an empty onLoad attribute in the body tag would kill the onlonad=function() {} function?

Jona

05-17-2005, 04:52 PM

Actually, it’s not weird. It’s perfectly logical. The “onload” attribute is the exact equivalent of the “window.onload” event, so when you set the “onload” attribute to nothing, the “window.onloadd” event is also cleared. This would be different if you used something like window.addEventListener (or the IE-equivalent, window.attachEvent), though, because it’s appending new functions to an event, rather than setting (or resetting) the event itself. Hopefully this clears up your confusion.

silent11

05-18-2005, 07:35 AM

Thanks Jona, that makes perfect sense. perhaps you (or someone) can help me out with the add/attachEvent stuff.

I can't seem to get it to work.

<html>
<head>
<title>toggle</title>
<script type="text/javascript">

</script>
</head>

<body onLoad="">

<h3>Blogs I Read <a href="#" onclick="toggle('outside1');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>

<div id="outside1">
<a href="http://www.blog.com/">my blog</a><br />
<a href="http://www.perl.com">perl.com</a>
</div>

<h3>Search Engines <a href="#" onclick="toggle('outside2');return false;" title="Toggle BlogRoll">(show/hide)</a></h3>

<div id="outside2">
<a href="http://www.google.com">Google Search</a><br />

</div>
</body>
</html>

I have onLoad="" in the body tag because the actual page I'm working with already has some functions in the onload attribute.

TIA

Jona

05-18-2005, 10:19 AM

The reason what you have doesn’t work is because you’re calling a function at that point in the script, instead of assigning that function to the event. Instead, this is how you should write that:

if (window.addEventListener){
window.addEventListener("load", function() {hide_all(2)} ,false);
}
else if (window.attachEvent){
window.attachEvent("onload", function() {hide_all(2)});
}

We create a function to call a function, because we want that functionality to be assigned to the event, and we do not want to call the hide_all function because that would assign the return value of the function to the event, which would have little or no effect on the page whatsoever.

silent11

05-18-2005, 10:50 AM

Jona, you DA' MAN!

Jona

05-18-2005, 11:36 AM

Happy to help. :)