CSS+JavaScript实现层级显示隐藏

/***************************by
garcon1986********************************/
感谢CSDN的shan1119 帮我解决Javascript部分的错误。
<mce:script language="JavaScript"><!--
function toggle(id,id2,id3) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
if (id2 != undefined)document.getElementById(id2).style.display = 'none';
if (id3 != undefined)document.getElementById(id3).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
// --></mce:script> 
<mce:style type="text/css"><!--
#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}
--></mce:style><style type="text/css" mce_bogus="1">#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}</style>
<div id="main" onclick="toggle('hidden','hidden2','hidden3');">
1
</div>
<div id="hidden" onclick="toggle('hidden2','hidden3')">
1.1
</div>
<div id="hidden2"onclick="toggle('hidden3');">
1.1.1
</div>
<div id="hidden3">
1.1.1.1
</div>
原帖：http://t