This site uses cookies- for more information see the Cookie Policy | Continue

Show and Hide Page Elements

How to reveal hidden text and hide it using hyperlinks

Example

The example below shows how text can be revealed and hidden using links on the page.

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.

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>

Tags