PDA

Click to See Complete Forum and Search --> : Show/Hide Layers

Warpnacelle
10-11-2004, 05:58 PM
Hello,

I am looking to do something very specific on our web page that requires the hiding and showing of layers. I searched the javascript source website but could not find exactly what I needed.

This works like Microsoft has on their site in certain areas.

The function is as follows.

-A question is asked.
-Underneath is an arrow pointing left.
-When the user clicks on the arrow the answer is revealed and the arrow points down.
-When the user clicks the down arrow the layer is hid and goes back to the start.

I found scripts that hid and revealed layers except the layer overlapped anything below it.

I would really like for any content on the page to shift down so that the revealed layer (the answer) in on its own line.

Here is a link to a random page on Microsoft.com where this is active:

http://office.microsoft.com/en-us/assistance/HA010930831033.aspx

Notice the blue arrow that says "Demo Text Version"

I cannot write something like this so any direction to scripts would be much appreciated!

Thanks in advance.
Vladdy
10-11-2004, 06:34 PM
You should be able to modify this to suit your needs:
www.vladdy.net/demos/tree.html
Kor
10-12-2004, 04:13 AM
Try also this (example in attachment also):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#quiz {
position:relative;
font-family: Arial, Helvetica, sans-serif;
width:300px;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #000000;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
indent=5;//set here the left indent in pixels
iup='blueup.gif'//set here the up arrow relative location
idrop='bluedrop.gif'//set here the drop arrow relative location
//No need to modify below
function coll(){
var dd=document.getElementById('quiz').getElementsByTagName('div');
var aa=document.getElementById('quiz').getElementsByTagName('img');
for (var i=1;i<dd.length;i=i+2){
dd[i].style.position='relative';
dd[i].style.display='none';
dd[i].style.left=indent+'px';
}
for (var j=0;j<aa.length;j++){
im=aa[j].getAttribute('src');
if(im==idrop){
aa[j].setAttribute('src',iup);break
}
}
}
function activ(w){
var d=w.parentNode.getElementsByTagName('div')[0];
var a=w.firstChild;
if(d.style.display=='none'){
coll();
d.style.display='inline';
a.setAttribute('src',idrop);
}
else{
d.style.display='none';
a.setAttribute('src',iup);
}
}
onload=coll;
</script>
</head>
<body>
<!-- Quiz -->
<div id="quiz">
<!-- Q11 -->
<div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q1...</a><br>
<div> Answer1 some text bla bla text text text text text text text text text
text text text </div>
</div>
<!-- END Q1 -->
<!-- Q2 -->
<div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q2...</a><br>
<div> Answer 2 text text text text text text text text text text text text
text text text</div>
</div>
<!-- END Q2 -->
<!-- Q3 -->
<div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q3...</a><br>
<div> Answer 3 text text text text text text text text text text text text</div>
</div>
<!-- END Q3 -->
<!-- Add below as many other Q as you need -->
</div>
<!-- END Quiz -->
</body>
</html>
Warpnacelle
10-12-2004, 09:50 AM
ROCK ON! Both you guys are awesome! Thank you very much!:cool: