Example
The example below shows how text can be revealed and hidden using links on the page.
This division (<div>) is normally hidden. It may have extra styles
or JavaScript attached to it that cause the <div> to float. The link
in <div id="unhide"> displays this <div>, and the link in
<div id="hide"> hides it again. These links are explained
in the text near the links.
If this div were absolutely positioned, it would overlay the existing text -
this may be a more desirable effect, but is not described here.
Congue sit. Sit placerat rebum euismod feugiat dolore sed blandit est vero. Amet clita.
Est et et tempor ea et. Et dolore ea facer. Erat diam elitr autem facilisis vero qui et sit facilisis. Eum magna amet duo sit magna sadipscing vulputate option consequat justo. Sed tempor et in nulla. Ipsum et amet dolor ut tincidunt exerci et takimata sit et. Amet sed labore vel amet magna sanctus nisl no ipsum. Et aliquyam labore labore justo at sanctus et stet. Esse justo ipsum sit in.
|
Hide the hidden div
The link above hides the hidden <div>. It also hides this text and link, and displays the other link involved in this exercise.
The JavaScript used is a FrontPage 2003 behaviour - also available in Expression Web - but will work with any version of FrontPage, and in most browsers less than 10 years old (Netscape 6 and later, FireFox, Opera 5 and later, IE5 and later, Safari, Mozilla and so on).
The function FP_changeProp(...) is called three times when the link is clicked using the onclick event:
For this link:
- the first call displays the other link
- the second call hides the hidden div
- the third call hides this text and link
Note that the JavaScript changes the CSS styles for the divs, and in CSS "display:block" shows things, "display:none" hides them.
View the hidden div
The link above displays the hidden <div>. It also displays the other link involved in this exercise, and finally hides this text and link .
The JavaScript used is a FrontPage 2003 behaviour - also available in Expression Web - but will work with any version of FrontPage, and in most browsers less than 10 years old (Netscape 6 and later, FireFox, Opera 5 and later, IE5 and later, Safari, Mozilla and so on).
The function FP_changeProp(...) is called three times when the link is clicked using the onclick event:
For this link:
- the first call displays the hidden <div>
- the second call displays the other link (and associated text)
- the third call hides this text and link.
Note that the JavaScript changes the CSS styles for the divs, and in CSS "display:block" shows things, "display:none" hides them.
|
The Code
The relevant JavaScript and HTML markup used are reproduced here - The JavaScript goes in the <head> of the page, the HTML where it is required. In the above, a table is used to layout the hidden <div> on the left, and the links on the right.
The JavaScript
<script type="text/javascript">
<!--
function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o";
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
The Hidden <div>
<div id="hiddendiv" style="display: none;">
<p style="border:red 1px solid;padding:3px;">
This division (<div>) is normally hidden. It may have extra styles
or JavaScript attached to it that cause the <div> to float. The link
in <div id="unhide"> shows the <div>, and the link in
<div id="hide"> hides it again. These links are explained
in the text near the links.</p>
<p>If this div were absolutely positioned, it would overlay the existing text -
this may be a more desirable effect, but is not described here.</p>
</div>
The "show it" link
<div id="unhide">
Superficial text has been removed. The paragraph below should all be on one line.
<p><a href="javascript:;"
onclick="FP_changeProp(/*id*/'hiddendiv',0,'style.display','block');
FP_changeProp(/*id*/'hide',0,'style.display','block');
FP_changeProp(/*id*/'unhide',0,'style.display','none')">View the hidden div</a></p>
</div>
The "hide it" link
<div id="hide" style="display: none;">
Superficial text has been removed. The paragraph below should all be on one line.
<p><a href="javascript:;"
onclick="FP_changeProp(/*id*/'unhide',0,'style.display','block');
FP_changeProp(/*id*/'hiddendiv',0,'style.display','none');
FP_changeProp(/*id*/'hide',0,'style.display','none');">Hide the hidden div</a></p>
</div>