At least one of my large clients insists that we do his Web applications without using ANY client side scripting at all (no JS, no cookies). So we need to do this for function menues on his applications. I dont have code I can extract to show you. However I can tell you that we use HTML::Template. In the template each branch of the tree is wrapped in an IF block. Of course you can next the IF's to get the tree depth. In your case, say dir1 gets clicked, you toggle the state of dir1 on the server side and when the page gets rebuilt the branch is either displayed or not.

In the past we have constructed complex data structures to make it all work, this usually means that each branch is fully populated all the time by the templating engine, only the IF parameters get changed. The HTML produced that way is pretty compact. Combine that with some spiffy CSS, such as that found at listamatic2 will give you the idea of how to generate the layout. It isn't trivial, but it ain't rocket science either.

If I could figure it out I am sure you can!

jdotornto

Update I was just doing some more browsing and saw this one - a complete pop-up list with just HTML and CSS here.