• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

hiding / showing css layers

ok

I've found this tutorial on the web and cusomised it a little but I'm a little stuck on closing the hiden layers

Basically when I click on the "correct link" it shows that layer, if I click again it hides that layer.

BUT if I click on different link it leaves the "correct link" and shows both layers.

I need to hide the "correct link" when I click on  a different link - assuming that the " correct link" is open.

Note
oviously if the "incorrect link" was open and I clicked on the "correct link" I would want the "incorrect lionk" to hide. etc etc

TIA

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function toggleLayer(whichLayer){
      if (document.getElementById) {
// this is the way the standards work
            var style2 = document.getElementById(whichLayer).style;
            style2.display = style2.display? "":"block";
      } else if (document.all) {
// this is the way old msie versions work
            var style2 = document.all[whichLayer].style;
            style2.display = style2.display? "":"block";
      } else if (document.layers) {
// this is the way nn4 works
            var style2 = document.layers[whichLayer].style;
            style2.display = style2.display? "":"block";
      }
}
</script>

<style>
div.quote {
      margin: 0px 15px 0px 15px;
      background-color: #FDFFCA;
      width: 300px;
      float: left;
}
div.quote p {
      font-style: italic;
      margin: 0px 0px 0px 0px;
}
div#commentForm {
      display: none;
      background-color: #FDFFCA;
      margin: 0px 20px 0px 20px;
      font-family: Arial, sans-serif;
      font-size: .8em;
      width: 300px;
      float: left;
}
div#commentForm2 {
      display: none;
      background-color: #FDFFCA;
      margin: 0px 20px 0px 20px;
      font-family: Arial, sans-serif;
      font-size: .8em;
      width: 300px;
      float: left;
}
div#commentForm3 {
      display: none;
      background-color: #FDFFCA;
      margin: 0px 20px 0px 20px;
      font-family: Arial, sans-serif;
      font-size: .8em;
      width: 300px;
      float: left;
}
a.commentLink {
      font-family: Arial, sans-serif;
      font-size: .8em;
}
</style>
</head>
<body>
<div class="quote">
<p>Pick a link, see if you are right!</p>
<a class="commentLink" title="correct link" href="javascript:toggleLayer('commentForm');">correct link</a><br />
<a class="commentLink" title="incorrect link" href="javascript:toggleLayer('commentForm2');">incorrect link</a><br /><br />
<a class="commentLink" title="incorrect link" href="javascript:toggleLayer('commentForm3');">Almost</a>

</div>
<div id="commentForm">
that's correct
</div>
<div id="commentForm2">
Enter the right info STUPID!
</div>
<div id="commentForm3">
OOOO so close!!!
</div>
</body>
</html>
0
abenbow
Asked:
abenbow
1 Solution
 
smaccariCommented:
Use a global variable in which you will store the current visible layer to make it disappear in your function:

var currentLayer = null;
function toggleLayer(whichLayer){
     if (document.getElementById) {
// this is the way the standards work
          var style2 = document.getElementById(whichLayer).style;
          style2.display = style2.display? "":"block";
     } else if (document.all) {
// this is the way old msie versions work
          var style2 = document.all[whichLayer].style;
          style2.display = style2.display? "":"block";
     } else if (document.layers) {
// this is the way nn4 works
          var style2 = document.layers[whichLayer].style;
          style2.display = style2.display? "":"block";
     }
     if ((currentLayer != null)&&(currentLayer != whichLayer)) document.getElementById(currentLayer).style.display="";
     currentLayer = whichLayer;
}
0
 
abenbowAuthor Commented:
I was just about to delete this having got it sorted but yours is a much cleaner solution so I'll use that instead

thanks
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.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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