MooTools powered Tree Components: Sortable Tree + Expand/Collapse Functionality
JavaScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Assets * Initial commit. Adding Tree, Collapse and Collapse.Cookie Sep 10, 2009
Css Newlines Feb 25, 2011
Demos remove test data Mar 16, 2014
Source add onSelect event, passing the element selected as a argument Mar 16, 2014
LICENSE Update for MooTools Forge Feb 25, 2011 update readme documentation Mar 16, 2014
package.yml Collapse.Persistent and Collapse.LocalStorage Mar 4, 2011

MooTools Tree

Provides a way to sort and reorder a tree via drag&drop. Allows to expand or collapse a list or a tree. State can be saved in a Cookie.


This Plugin is part of MooTools PowerTools!.


Build via Packager, requires MooTools Core and MooTools Class-Extras to be registered to Packager already

packager register /path/to/tree
packager build Tree/* > tree.js

To build this plugin without external dependencies use

packager build Tree/* +use-only Tree > tree.js


See Demos/index.html

How To Use


Create a new instance of Tree

var tree = new Tree('unorderedList', options);

To serialize a tree you can use the 'serialize'-method


tree.serialize(fn); // You can also pass a custom function

The return value can then be encoded and sent to the server



  • indicatorOffset: (number, defaults to 0) The left offset of the indicator
  • cloneOffset: (string, defaults to {x: 16, y: 16}) The offset to be used for the cloned element
  • cloneOpacity: (boolean, defaults to 0.8) Opacity of the currently dragged element
  • checkDrag(element): (function, returns boolean) Checks if the element that is to be dragged is draggable.
  • checkDrop(droppable, dropOptions): (function, returns boolean) Checks if the droppable element can be dropped on


  • onChange(): fires when the tree changes. Can be used in conjunction with the 'serialize' method.
  • onSelect(): fires when mouse is on a item. element selected is send to the function.


Create a new instance of Collapse

var collapse = new Collapse('parentElement', options);

You can use both Tree and Collapse in conjunction. If you drag over a collapsed element, it will expand automatically after a short delay.


  • animate: (boolean, defaults to true) Whether to animate the toggle elements or not
  • fadeOpacity: (number, defaults to 0.5) The opacity to be used for toggle elements when they are not currently hovered
  • className: (string, defaults to collapsed) The class name to be used for collapsed nodes
  • selector: (string, defaults to a.expand) Selector to be used to determine the expand/collapse elements
  • listSelector: (string, defaults to li) The element which contains elements determined by the selector and childSelector options
  • childSelector: (string, defaults to ul) Selector for the elements that are to be collapsed and expanded


An interface to persist the state of collapse-able Tree. Extend this to use a new persistent storage. Included are Cookie and LocalStorage classes, but you can only need to extend and override getState and setState to use something else, such as globalStorage, userData for IE, or some cross-browser storage utility.


Create a new instance of Collapse.Cookie

var collapse = new Collapse.Cookie('parentElement', options);


  • getAttribute(element): (function) Returns the attribute to distinct between different elements, uses the id by default
  • getIdentifier(element): (function) Returns the name for the cookie, uses the id and className by default