Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

hiding / showing css layers

Posted on 2006-05-17
2
Medium Priority
?
288 Views
Last Modified: 2008-03-17
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
Comment
Question by:abenbow
2 Comments
 
LVL 9

Accepted Solution

by:
smaccari earned 2000 total points
ID: 16700305
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
 

Author Comment

by:abenbow
ID: 16700407
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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question