Current example demonstrates multi level file tree with default options, initialized from an <ul>element.

In this example multi level file tree initialized from JSONdata type and attached to <div>block element.

To embed JSON data in the markup, specify data type via data-typeattribute and hide it using .d-noneclass.

Fancytree supports drag'n'drop of tree nodes and behave like a standard jQuery UI draggable and droppable.

This tree has multi selection enabled: a single-click handler selects the node; a keydown handler selects on space.

You can turn off a node selection by adding .hideCheckboxclass to it or disable it using .unselectableclass.

Store and restore tree status using cookies or local storage: click, expand or select nodes and reload the page.

Change checkboxes state programmatically using setSelected()parameter with trueor falseproperties.

Hierarchical multi selection example. A single-click handler selects the node; a keydown handler selects on space.

Single select example: a double-click handler selects a document node; a keydown handler selects on space.

Node titles can be changed via inline editing using dblclick, Shift + click [F2]or Enter(on Mac only).

The following example demonstrates optional tiny badges that display count of children elements at parent node.

This example demonstrates the usage of some Fancytree API functions, such as disabling and enabling file tree.

This example demonstrates a sortingfeature of child list by title in 2 ways: full tree and in active nodes only.