CSS problem about show / hide

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 toggl开发者_StackOverflowe(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> 

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.