[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

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
0
sureshp
Asked:
sureshp
  • 3
  • 2
2 Solutions
 
radnorCommented:
<body onLoad="switchMenu('myvar1');">
0
 
mcs1169Commented:
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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