CSS问题！

我现在实现了css的层级显示/隐藏。可是不太完美，实际需要一层一层的展开，可以一次隐藏多层下属。 而我所实现的是一次全部展开，一次可隐藏多层下属。

请高手帮忙改一下。

多谢啦。

代码如下：
PHP code:
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
<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;
}
</style>

<div id="main" onclick="toggle('hidden');toggle('hidden2');toggle('hidden3');">
1
</div>

<div id="hidden" onclick="toggl