CSS problem about show / hide - css

Question

I have realized show/hide function in css. But it's not what i need. i want to expand the content layer by layer and hide them all in one click. And now i can't expand layer by layer.
Can you help me with that? Thanks a lot. :)
here is the code and it's tested:
<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="toggle('hidden2');toggle('hidden3');">
1.1
</div>
<div id="hidden2"onclick="toggle('hidden3');">
1.1.1
</div>
<div id="hidden3">
1.1.1.1
</div>

Answer 1

Have you considered using a plugin from a framework like jQuery, Mootools, or ExtJS instead of trying to reinvent the wheel?
It looks like you want a treeviewer.
btw, you are using javascript, it's not only CSS... please tag javascript as well.