It is a tedious task. Expand/Collapse with nested Trees, sorting of Trees, expanding/collapsing of flat data. But I'm here to bring some classes to you to make your life easier. Sounds good? I have released my Sortable Tree class over a year ago and it worked well for me in several projects. I'm currently building a CMS where I need the ability to expand/collapse nodes, even within sortable trees. And I can tell you, a sortable tree is much superior and easier to understand than copy/cut/paste to move nodes around. First up: The Demos!

Demo of Tree, Collapse and Collapse.Cookie

So, what's that about?

In the demo you can see all three classes in action:

Tree

The Tree class makes it possible for you to sort any nested unordered list and to serialize the output. It is similar to the Sortable plugin in MooTools-More, allowing the user to interact and rearrange nodes via Drag&Drop. People love this when you show it off.

Collapse

Allows the user to expand/collapse nodes to quickly hide and show subnodes.

Collapse.Cookie

Works like the Collapse class but also stores the current state in a cookie so it persists on page reloads.

If you instantiate the Collapse and the Tree class on the same list, there are some hooks in place to automatically expand nodes when you hover them while dragging or to show/hide the expand-element when subnodes get added or removed.

While the Tree class is very specific and enforces you to use an unordered list with ul/li elements, the Collapse plugin is totally generic. I'm using it for a lot of different elements and structures, even menus.

Please note that these classes are not meant to work outside of the DOM. Their sole purpose is to provide an easy way to let the user interact with markup in your application. They are not meant to provide any functionality like a tree does in the classical sense.

Usage

Using the classes is fairly easy, just instantiate them with the element you want to base it on - have a look at the code in the Demos for more info. new Tree(list) or new Collapse(container) is sufficient. As you may want to specify some options or use different selectors in the Collapse plugin you can also specify an options object. For the available events and options please see the header sections in the according source file.

Both classes are dynamic and use Element.Delegation. You can add and remove nodes via the normal DOM Methods. If you add elements to a list that is using the Collapse class, please call the method "updateElement(element)" on it to initially set up the toggle-icon.

You can use the classes with MooTools-More 1.2.4.1 or newer. If you want to use any previous version of MooTools-More just include the Delegation.js file which you can find in the Demos/ folder of the download.

Internet Explorer

Big thanks go out to @fakedarren, a great developer, who contributed the style sheets needed to make the CSS work in Internet Explorer 6. You can find them in the Css/IE6.css file. Feel free to manually include them.

On another note: There is a little problem with the current implementation of Element.Delegation which makes it unable to use "a" elements in Internet Explorer 8 to show the expand/collapse-elements. I'm happy I currently don't have to support IE at all, but you may have to. Just use "span.expand" as a selector for the Collapse-Class and you should be good to go!

Fork on GitHub

I deliberately kept the plugins simple, you can easily sub class them and customize the classes for your own needs. If you need it, feel free to add an animation when toggling elements.

Download

Download version 1.0 from GitHub

Once we (the MooTools-Team) release MooTools 2.0, I will rework the Tree class yet again to provide a more generic way to use it, so it won't be limited to lists any more.