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.

In reply to Re: Clickable Tree Menu using Perl by jdtoronto
in thread Clickable Tree Menu using Perl by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.