Sam's module is pretty sharp :)

Here's the basic HTML+JS+CSS way to make them if your original structure is or can be UL / LI lists. Just in case you wanted to know HOW one worked. 

<script>
function toggle(obj) {
    obj.parentNode.className = (obj.parentNode.className=='li-open') ?
+ 'li-closed' : 'li-open';
    return false;
}
</script>
<style type="text/css">
ul.dtree li.li-open   ul { display: block; }
ul.dtree li.li-closed ul { display: none; }
</style>
<ul class=dtree>
    <li class=li-closed>
        <div class="leaf" onClick="toggle(this)">Item</div>
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

[download]
The kinda nice thing about this technique is you can go back to vanilla UL/LI lists just by removing those CSS classes.

BTW, I make my ul/li lists in perl and HTML::Template so nyaaah! ;)

/\/\averick

In reply to Re: html tree by maverick
in thread html tree by Murcia

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.