Show/Hide image or content based on form drop down choice

I have the need to create a small form with a select box with three choices. Choice 1, choice 2 choice3.

Choice 1 shows content in a specified area and hides choice 2,3 , Choice 2 Hides Choice 1 and 3 and shows choice 2, Choice 3 shows Choice three content and hides choice 1 and 2.

Hope this makes sense. I have come close but my content keeps overlapping when the choices are changing.

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<form name="form1" method="post" action="">
  <div id="Layer1" style="position:absolute; left:200px; top:150px; width:455px; height:131px; z-index:1; visibility: hidden">
  Content 1 </div>
  <div id="Layer2" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:2; visibility: hidden">
    Content 2</div>
  <div id="Layer3" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:3; visibility: hidden">
    Content 3 </div>
 
  <p>&nbsp;</p>
  <p>
    <select name="type" onchange="Javascript:chklayer(this.value);">
      <option value="0">Please Select:</option>
      <option value="1">Add a Report</option>
      <option value="2">Manage a Report</option>
        <option value="3">File Upload snd Report Usage</option>
    </select>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>
            <script language="JavaScript">

function chklayer(v) {
     
     if (v == "0") {
          document.getElementById(layershow).style.visibility = 'hidden';
          document.getElementById(layerhide).style.visibility = 'hidden';
          return false;
     } else if (v == "1") {
          layershow = "layer1";
          layerhide = "layer2";
              layerhide = "layer3";
      
     } else if (v == "2") {
          layerhide = "layer1";
              layershow = "layer2";
          layerhide = "layer3";
      
     } else if (v == "3") {
          layershow = "layer3";
               layerhide = "layer1";
              layerhide = "layer2";
             
     }
     document.getElementById(layershow).style.visibility = 'visible';
     document.getElementById(layerhide).style.visibility = 'hidden';    
}
</script>
</body>
</html>

What is wrong? Thanks!
mrslate1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
function chklayer(v)  {
     var layerObjs = new Array();
     var dispStatus = new Array();
     for (ix=1; ix < 4; ix++) {
     layerObjs[ix-1] = document.getElementById('Layer'+ix);
     dispStatus[ix-1] = 'hidden';
     }
     if (v > 0 && v < 4) {
          dispStatus[parseInt(v)-1] = 'visible';    
     }
     for (ix=0; ix < 3; ix++) {
     layerObjs[ix].style.visibility = dispStatus[ix-1];
     }
     if (v == "0") {
          return false;
     }
     return true;
}
Pravin AsarPrincipal Systems EngineerCommented:
Please take this one... I noticed the bug in previous post


<html>
<head>
<title>Select and Hide</title>
</head>

<body>
<html>
<head>
     <title>Untitled</title>
</head>

<body>
<script language="javascript">
function chklayer(v)  {
     var layerObjs = new Array();
     var dispStatus = new Array();
     for (ix=1; ix < 4; ix++) {
     layerObjs[ix-1] = document.getElementById('Layer'+ix);
     dispStatus[ix-1] = 'hidden';
     }
     if (v > 0 && v < 4) {
          dispStatus[parseInt(v)-1] = 'visible';    
     }
     for (ix=0; ix < 3; ix++) {
           layerObjs[ix].style.visibility = dispStatus[ix];
     }
     if (v == "0") {
          return false;
     }
     return true;
}
</script>
<form name="form1" method="post" action="">
  <div id="Layer1" style="position:absolute; left:200px; top:150px; width:455px; height:131px; z-index:1; visibility: hidden">
  Content 1 </div>
  <div id="Layer2" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:2; visibility: hidden">
    Content 2</div>
  <div id="Layer3" style="position:absolute; left:200px; top:150px; width:454px; height:134px; z-index:3; visibility: hidden">
    Content 3 </div>
 
  <p>&nbsp;</p>
  <p>
    <select name="type" onchange="Javascript:chklayer(this.value);">
      <option value="0">Please Select:</option>
      <option value="1">Add a Report</option>
      <option value="2">Manage a Report</option>
       <option value="3">File Upload snd Report Usage</option>
    </select>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>

</body>
</html>
ZvonkoSystems architectCommented:
How about this reduction:

<html>
<head>
     <title>Titled</title>
<script language="JavaScript">
var actDiv;
function chklayer(v) {
  if (actDiv) {
    actDiv.style.display="none";
  }
  if(v>0){
    actDiv = document.getElementById("Layer"+v);
    actDiv.style.display="block";
  }
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<div style="position:absolute; left:200px; top:150px; width:455px; height:131px; z-index:1;">
  <div id="Layer1" style="display:none;">
  Content 1 </div>
  <div id="Layer2" style="display:none;">
    Content 2</div>
  <div id="Layer3" style="display:none;">
    Content 3 </div>
</div>  
  <p>&nbsp;</p>
  <p>
    <select name="type" onchange="chklayer(this.value);">
      <option value="0">Please Select:</option>
      <option value="1">Add a Report</option>
      <option value="2">Manage a Report</option>
       <option value="3">File Upload snd Report Usage</option>
    </select>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</form>

</body>
</html>


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

mrslate1Author Commented:
I will go through these and give the awards on Monday. Thanks a ton!
mrslate1Author Commented:
I split the points as the Reduction in code is always benificial, but the answer by pravinasar was quick and precise. Thanks to both. I really appreciate the help!
ZvonkoSystems architectCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.