<HTML>
<HEAD>
<TITLE>Expand & Collapse 3</TITLE>
<script type="text/javascript">
function mOver(n,id){
if(!window["obj"+n]){
window["obj"+n]=new doEvents()
}
window["obj"+n].over(id)
}
function doEvents(){
this.status="out"
this.over=function(id){
num=id.substring(id.length-1,id.length)
if(this.status!="clicked"){
document.getElementById(id).style.display="block"
document.getElementById("lnk"+num).style.fontWeight="bold"
this.status="over"
}
}
this.mOut=function(id){
if(this.status!="clicked"){
document.getElementById(id).style.display="none"
document.getElementById("lnk"+num).style.fontWeight="normal"
this.status="out"
}
}
this.mClick=function(id){
if(this.status=="clicked"){
document.getElementById(id).style.display="none"
document.getElementById("lnk"+num).style.fontWeight="normal"
this.status="out"
}
else{
document.getElementById(id).style.display="block"
document.getElementById("lnk"+num).style.fontWeight="bold"
this.status="clicked"
}
}
}
</script>
<style type="text/css">
.lnks{
width:50px;
cursor:hand;
cursor:pointer;
}
</style>
</HEAD>
<BODY>
<h1>Expand & Collapse 3</h1>
<div id="lnk1" class="lnks" onmouseover="mOver(1,'div1')" onmouseout="obj1.mOut('div1')" onclick="obj1.mClick('div1')">Link 1</div>
<div id="div1" style="display:none;;width:100px">
Element One
</div>
<div id="lnk2" class="lnks" onmouseover="mOver(2,'div2')" onmouseout="obj2.mOut('div2')" onclick="obj2.mClick('div2')">Link 2</div>
<div id="div2" style="display:none;width:100px">
Element Two
</div>
<div id="lnk3" class="lnks" onmouseover="mOver(3,'div3')" onmouseout="obj3.mOut('div3')" onclick="obj3.mClick('div3')">Link 3</div>
<div id="div3" style="display:none;width:100px">
Element Three
</div>
</BODY>
</HTML>