Visibility C/C/P Codes

JS BUG! PLEASE RELOAD!

<html><head>
<title>Visibility Codes</title>

function placement(){
// this allows old classics to view the page
// the onLoad=placement() initiates it
document.all.div1.style.posTop=30;  
document.all.div1.style.posLeft=20;
document.all.div2.style.posTop=30;  
document.all.div2.style.posLeft=20;
document.all.div3.style.posTop=30;  
document.all.div3.style.posLeft=20;
document.all.div4.style.posTop=30;  
document.all.div4.style.posLeft=20;
document.all.div5.style.posTop=30;  
document.all.div5.style.posLeft=20;
document.all.div2.style.visibility="hidden";
document.all.div3.style.visibility="hidden";
document.all.div4.style.visibility="hidden";
document.all.div5.style.visibility="hidden";
}

function show4(){
document.all.div5.style.visibility="hidden"; 
document.all.div4.style.visibility="visible"; 
setTimeout("show3()",1000) 
}

function show3(){
document.all.div4.style.visibility="hidden"; 
document.all.div3.style.visibility="visible"; 
setTimeout("show2()",1000) 
}

function show2(){
document.all.div3.style.visibility="hidden"; 
document.all.div2.style.visibility="visible"; 
setTimeout("show1()",1000) 
}

function show1(){
document.all.div2.style.visibility="hidden"; 
document.all.div1.style.visibility="visible" 
}</script>

<body bgcolor=#cccccc text=#000099 fontsize=medium link=red alink=red vlink=red onload=placement()>
<noframes>JS warning... please reload</noframes>

<div id=div1 bgcolor=white width=500 height=300>
<a onclick="document.all.div1.style.visibility='hidden';document.all.div2.style.visibility='visible'">next</a>
<p>
This lesson is about Visibility.
<p>
There are 5 divs on this page
<p>
All occupying the same space.
</div>

<div id=div2 bgcolor=lightblue width=500 height=300>
<a onclick="document.all.div2.style.visibility='hidden';document.all.div3.style.visibility='visible'">next</a>
<p>
Though only one at a time is visible.
<p>
The others 4 are hidden
</div>

<div id=div3 bgcolor=violet width=500 height=300>
<a onclick="document.all.div3.style.visibility='hidden';document.all.div4.style.visibility='visible'">next</a>
<p>
When we declare the div in the style tag we include the visibility option.
<p>
<font color=black>
#div1 {position:absolute; top: 30; left: 20;visibility:visible}
<br>
#div2 {position:absolute; top: 30; left: 20;visibility:hidden}
</font>
<p>
We have also included a placement() function that places and hides the divs. An onLoad="placement()" initiates it.
This allows older classics to view it properly while not affecting newer units.
</div>

<div id=div4 bgcolor=lightgreen width=500 height=300>
<a onclick="document.all.div4.style.visibility='hidden';document.all.div5.style.visibility='visible'">next</a>
<p>
as you click from one to the other, the current one becomes invisible while revealing the next one.
<p>
This is done in the link. 
<p>
<font color=black>
<a onclick="document.all.div1.style.visibility='hidden';document.all.div2.style.visibility='visible'"> next</a>
</font>
<p>
Though difficult to see, there is a semicolon ; in that link. That seperates the actions and allows more than one action to be initiated with a single click. 
</div>

<div id=div5 bgcolor=gold width=500 height=300>
<a onclick="show4()">rewind</a>
<p>
The rewind button initiates a function within the script called show4. The code within that function and the ones that follow are identical to the code within the links. 
<br>
The setTimeout delays the change for 1 second.
 <p>
<font color=black>
<a onClick="show4()">rewind </a>
</font>
<p>
It is a simple thing to do but it can create dramatic results
</div>

<div id=index width=500 align=center>
index or footer or other subject matter goes here
</div></body></html>