Display only one layer at a time

Hello

I have found a great script that can show and hide text, when you click on one of the links the hidden text is displayed.
What I need is the open layer to collapse so that only one layer is visible at a time.
Example: A user clicks on Question 1 and answer 1 is shown.
Next the user clicks on Question 2, answer 1 disappears while answer 2 is shown.

I would appreciate it if any solution will work in firefox, explorer and other popular browsers 8o)

Thanks.


<script language="JavaScript" type="text/javascript">
<!--
function exchangeDisplay(id){

 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'img/arrdown.gif';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'img/arracross.gif';
 }

}

function BlurLinks(){

 lnks=document.getElementsByTagName('a');
 for(i=0;i<lnks.length;i++){
 lnks[i].onfocus=new Function("this.blur()");
 }

}

onload=BlurLinks;
//-->
</script>
<a href="javascript:exchangeDisplay('layer1')">
<img src='img/arracross.gif' id='img_layer1' border='0'>Question 1</a><br>
<div id='layer1' style='display: none;'>answer 1</div><br>

<a href="javascript:exchangeDisplay('layer2')">
<img src='img/arracross.gif' id='img_layer2' border='0'>Question 2</a><br>
<div id='layer2' style='display: none;'>answer 2</div><br>

<a href="javascript:exchangeDisplay('layer3')">
<img src='img/arracross.gif' id='img_layer3' border='0'>Question 3</a><br>
<div id='layer3' style='display: none;'>answer 3</div><br>
rasmus55Asked:
Who is Participating?
 
BatalfCommented:
One example:



<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
var activeLayer = false;
function exchangeDisplay(id){
 if(activeLayer)document.getElementById(activeLayer).style.display='none';
 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'img/arrdown.gif';
  activeLayer=id;
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'img/arracross.gif';
 }

}

function BlurLinks(){

 lnks=document.getElementsByTagName('a');
 for(i=0;i<lnks.length;i++){
 lnks[i].onfocus=new Function("this.blur()");
 }

}

onload=BlurLinks;
//-->
</script>
</head>
<body>
<a href="javascript:exchangeDisplay('layer1')">
<img src='img/arracross.gif' id='img_layer1' border='0'>Question 1</a><br>
<div id='layer1' style='display: none;'>answer 1</div><br>

<a href="javascript:exchangeDisplay('layer2')">
<img src='img/arracross.gif' id='img_layer2' border='0'>Question 2</a><br>
<div id='layer2' style='display: none;'>answer 2</div><br>

<a href="javascript:exchangeDisplay('layer3')">
<img src='img/arracross.gif' id='img_layer3' border='0'>Question 3</a><br>
<div id='layer3' style='display: none;'>answer 3</div><br>
</body>
</html>
0
 
rasmus55Author Commented:
Hi Batalf

Excellent, it did the trick! I have been sweating over it, but I should just have asked an expert 8o)

I might have accepted the answer too quickly though, the graphic that you couldn't of course see doesn't go back to its original state, it stays at img/arrdown.gif. Is it also possible to do this?
0
 
BatalfCommented:
yes, of course.

Change your "exchangeDisplay" function to this:


function exchangeDisplay(id){
 if(activeLayer){
       document.getElementById(activeLayer).style.display='none';
       document.getElementById(activeLayer).src = 'img/arrdown.gif';
 }
 var img = 'img_' + id;
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
  document.getElementById(img).src = 'img/arrdown.gif';
  activeLayer=id;
 }
 else
 {
  document.getElementById(id).style.display = 'none';
  document.getElementById(img).src = 'img/arracross.gif';
 }

}
0
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.

 
rasmus55Author Commented:
In the meantime I came up with this:

 var img = 'img_' + id;
 if(activeLayer)document.getElementById("img_"+activeLayer).src = 'img/arracross.gif';

...adding the second line to the script.

It now works, thanks a lot!
Ras
0
 
BatalfCommented:
Glad I could help!

And yes, you're right. Your syntax is the right one to use for the images. You can also include them all in one block

if(activeLayer){
      document.getElementById(activeLayer).style.display='none';
      document.getElementById("img_"+activeLayer).src = 'img/arracross.gif';
 }

Batalf
0
 
rasmus55Author Commented:
Thanks, that is neater code 8o)

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