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.di splay = 'block';
document.getElementById(im g).src = 'img/arrdown.gif';
}
else
{
document.getElementById(id ).style.di splay = 'none';
document.getElementById(im g).src = 'img/arracross.gif';
}
}
function BlurLinks(){
lnks=document.getElementsB yTagName(' a');
for(i=0;i<lnks.length;i++) {
lnks[i].onfocus=new Function("this.blur()");
}
}
onload=BlurLinks;
//-->
</script>
<a href="javascript:exchangeD isplay('la yer1')">
<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:exchangeD isplay('la yer2')">
<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:exchangeD isplay('la yer3')">
<img src='img/arracross.gif' id='img_layer3' border='0'>Question 3</a><br>
<div id='layer3' style='display: none;'>answer 3</div><br>
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
{
document.getElementById(id
document.getElementById(im
}
else
{
document.getElementById(id
document.getElementById(im
}
}
function BlurLinks(){
lnks=document.getElementsB
for(i=0;i<lnks.length;i++)
lnks[i].onfocus=new Function("this.blur()");
}
}
onload=BlurLinks;
//-->
</script>
<a href="javascript:exchangeD
<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:exchangeD
<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:exchangeD
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
yes, of course.
Change your "exchangeDisplay" function to this:
function exchangeDisplay(id){
if(activeLayer){
document.getElementById(ac tiveLayer) .style.dis play='none ';
document.getElementById(ac tiveLayer) .src = 'img/arrdown.gif';
}
var img = 'img_' + id;
if(document.getElementById (id).style .display == 'none')
{
document.getElementById(id ).style.di splay = 'block';
document.getElementById(im g).src = 'img/arrdown.gif';
activeLayer=id;
}
else
{
document.getElementById(id ).style.di splay = 'none';
document.getElementById(im g).src = 'img/arracross.gif';
}
}
Change your "exchangeDisplay" function to this:
function exchangeDisplay(id){
if(activeLayer){
document.getElementById(ac
document.getElementById(ac
}
var img = 'img_' + id;
if(document.getElementById
{
document.getElementById(id
document.getElementById(im
activeLayer=id;
}
else
{
document.getElementById(id
document.getElementById(im
}
}
ASKER
In the meantime I came up with this:
var img = 'img_' + id;
if(activeLayer)document.ge tElementBy Id("img_"+ activeLaye r).src = 'img/arracross.gif';
...adding the second line to the script.
It now works, thanks a lot!
Ras
var img = 'img_' + id;
if(activeLayer)document.ge
...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(ac tiveLayer) .style.dis play='none ';
document.getElementById("i mg_"+activ eLayer).sr c = 'img/arracross.gif';
}
Batalf
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(ac
document.getElementById("i
}
Batalf
ASKER
Thanks, that is neater code 8o)
Ras
Ras
ASKER
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?