Can anyone solve


Hi all,

The below code is an example for div. The code will expand and collapse div.
I would like to expand the first div onLoad and other div should be collapse. Now all div are in expand form. So can anyone modify this code to display the first div content and other div in collapse.  

Code
-----

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Switch menu</title>
<style type="text/css">
<!--
body {
text-align:center;
margin:30px;
}
#wrapper {
text-align:left;
margin:0 auto;
width:500px;
min-height:100px;
border:1px solid #ccc;
padding:30px;
}
a {
color:blue;
cursor:pointer;
}
#myvar {
border:1px solid #ccc;
background:#f2f2f2;
padding:20px;
}
-->
</style>
<script 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 test() {
      
      document.getElementById("myvar").style.display='';
}
//-->
</script>
</head>

<body onLoad="test();">
<div id="wrapper">

      <p><a onclick="switchMenu('myvar');" title="Switch the Menu">Para - 1</a></p>
      <div id="myvar">
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      </div>

<p><a onclick="switchMenu('myvar1');" title="Switch the Menu">Para - 2</a></p>
      <div id="myvar1">
      <p>Second Paragraph</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      <p>This is paragraph text that is all up in this place that does some pretty cool stuff</p>
      </div>

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

Thanks
LVL 1
sureshpAsked:
Who is Participating?
 
radnorConnect With a Mentor Commented:
<body onLoad="switchMenu('myvar1');">
0
 
mcs1169Connect With a Mentor Commented:
Try this...

function test() {
     
     document.getElementById("myvar1").style.display='none';
}

Your div is myvar1, not myvar...

Mitch
0
 
radnorCommented:
Why?  

I did a "copy n' paste" and the code works.  

Just call the onClick event (used when clicking "para 2") when the page is loaded and make PARA 2 collapse.
0
 
mcs1169Commented:
rad, Don't know if that was directed at me but if it was, notice that we posted at the same time so I did not see your response. I was attempting an answer to the original question. Sorry if it seems that I was stepping on your toes.
0
 
radnorCommented:
Nah, didn't feel anything....  

I like the code the poster supplied. They had the right idea and on right track.  Just needed to call the same code for PARA2 with the onLoad event and it works!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.