[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 521
  • Last Modified:

how to run collapse on pageload

Maybe a simple javascript question but I couldn't solve it. I want the javascript code collapse Main title when the page loads.

How?
thank you...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}
function collapseAll(objs) {
	var i;
	for (i=0;i<objs.length;i++ ) {
		objs[i].style.display = 'none';
	}
}
function pageLoad() {
	collapseAll($('mydiv1'));
}
addEvent(window,'load',pageLoad);
//-->
</script>
 
</head>
 
<body>
		<h1><a onclick="switchMenu('mydiv1');" title="Main title">Main title</a></h1>
		<div id="mydiv1">
		<h2>subtitle</h2>
		<p align="justify">test123
</p>
	</div>
 
</body>
</html>

Open in new window

0
cemlouis
Asked:
cemlouis
  • 2
  • 2
1 Solution
 
MMDeveloperCommented:
I'd change

addEvent(window,'load',pageLoad);

to

window.onload = function() {
      pageLoad();
};
0
 
hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
function $(str){return document.getElementById(str);}
function switchMenu(obj) {
      var el = document.getElementById(obj);
      if ( el.style.display != "none" ) {
            el.style.display = 'none';
      }
      else {
            el.style.display = '';
      }
}
function collapseAll(objs) {
      var i;
      for (i=0;i<objs.length;i++ ) {
            objs[i].style.display = 'none';
      }
}
function pageLoad() {
      collapseAll( [$('mydiv1')]);
}
window.onload=pageLoad;
//-->
</script>
 
</head>
 
<body>
            <h1><a onclick="switchMenu('mydiv1');" title="Main title">Main title</a></h1>
            <div id="mydiv1">
            <h2>subtitle</h2>
            <p align="justify">test123
</p>
      </div>
 
</body>
</html>

Open in new window

0
 
cemlouisAuthor Commented:
hielo,

Your solution works but what if there is more than 1 divs? I tried below but not working:

function pageLoad() {
      collapseAll( [$('mydiv1', 'mydiv2')]);
}

Any solutions?
0
 
hieloCommented:
try:
function pageLoad() {
      collapseAll( [$('mydiv1'), $('mydiv2'), $('mydiv3') ] );
}

Open in new window

0
 
cemlouisAuthor Commented:
thanks...
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now