/    Sign up×
Community /Pin to ProfileBookmark

Show/Hide Layers

Copy linkTweet thisAlerts:
Oct 11.2004

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:

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

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.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@VladdyOct 11.2004 — You should be able to modify this to suit your needs:

www.vladdy.net/demos/tree.html
Copy linkTweet thisAlerts:
@KorOct 12.2004 — Try also this (example in attachment also):
[code=php]
<!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>
[/code]

[upl-file uuid=fd2bbef6-c0f9-4667-9dfb-c318c11aca13 size=1kB]ex.zip[/upl-file]
Copy linkTweet thisAlerts:
@WarpnacelleauthorOct 12.2004 — ROCK ON! Both you guys are awesome! Thank you very much!?
×

Success!

Help @Warpnacelle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...