Link to home
Start Free TrialLog in
Avatar of rasmus55
rasmus55

asked on

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>
ASKER CERTIFIED SOLUTION
Avatar of Batalf
Batalf
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rasmus55
rasmus55

ASKER

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?
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';
 }

}
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
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
Thanks, that is neater code 8o)

Ras