<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Demo Open Closing effect </title>
<style type= "Text/css" >
table{
border: #0000FF 1px solid;
}
Table td{
border: #0033FF 1px solid;
Background-color: #6699FF;
}
Table TD div{
Background-color: #FFFF99;
Display:none;
}
Table TD a:link,table TD a:visited{
Text-decoration:none;
Color: #993300;
}
. open{
Display:block;
}
. close{
Display:none;
}
</style>
<script type= "Text/javascript" >
Function List () {
var anode = event.srcelement;
Alert (ANode.nextSibling.nodeName)//Take a sibling node easy to get empty text node
var tdnode = Anode.parentnode;
var divnode = tdnode.getelementsbytagname ("div") [0];
var tabnode = document.getelementsbytagname ("table") [0];
var divnodes = tabnode.getelementsbytagname ("div");
for (var x = 0;x < divnodes.length;x++) {
if (Divnodes[x]==divnode) {
if (divnode.classname== "open") {
Divnode.classname= "Close";
}else{
Divnode.classname= "OPEN";
}
}else{
Divnodes[x].classname= "Close";
}
}
alert (divnode.nodename);
}
</script>
<body>
<table>
<tr>
<td>
<a href= "javascript:void (0)" onclick= "list ()" > Buddy menu Lists </a>
<div>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
</div>
</td>
</tr>
<tr>
<td>
<a href= "javascript:void (0)" onclick= "list ()" > Buddy menu Lists </a>
<div>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
</div>
</td>
</tr>
<tr>
<td>
<a href= "javascript:void (0)" onclick= "list ()" > Buddy menu Lists </a>
<div>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
</div>
</td>
</tr>
<tr>
<td>
<a href= "javascript:void (0)" onclick= "list ()" > Buddy menu Lists </a>
<div>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
New white hair witch <br/>
</div>
</td>
</tr>
</table>
</body>
