Getting div elements to collapse on page load

[Errant_Shadow]

I've looked at a lot of tutorials for this and they say a few different things, but I've tried them all with no luck.

 

I have a function working that toggles the display of a div element on and off.

 

Now what I'm trying to do is create a function that will collapse a series of specific div elements as soon as the page loads; I don't want them to be collapsed if javascript is off, which is why I'm collapsing it with more script rather than just setting the display to none.

 

here's what I got so far:

<script type="text/javascript">
	<!--
	function switchMenu(objID)
	{
		var divElement = document.getElementById(objID);
		divElement.style.display = (divElement.style.display != 'none')? 'none' : 'block';
	}

	/* thought maybe it was this function, so I tried a more direct approach
	function switchMulti(array)
	{
		for (var i = 0; i < array.length; i++)
		{
			switchMenu(array[i]);
		}
	}
	*/

	function pageLoad()
	{
		switchMenu('Section 1');
		switchMenu('Section 2');
		switchMenu('Section 3');
		switchMenu('Section 4');
	}

	// tried onLoad="pageLoad();" inside the body tag, no luck
	// addEvent(window, load, pageLoad);
	window.onload = pageLoad;
	-->
</script>

 

They all work individually, just not all at once on the page load. Anyone got any ideas?

[Errant_Shadow]

Still haven't figured it out, but I found a better method to the same ends.

 

check out addDomLoadEvent:

http://www.thefutureoftheweb.com/blog/adddomloadevent

 

Works cross browser and everything.

[spambadger]

By the way, if you have jQuery (and I would since it makes DOM manipulation trivial, and it was originally written by one of the authors of that addDOMLoadEvent), you could do something like this:

 

$(document).ready(
function(){
	$('.class').hide();
}
);

 

with class being a css class.

 

I'm sure most other javascript libraries make this simple too, but if I'm perfectly honest I haven't experimented with any others...