Tree View / Folder Structure

Tree View Widget

Build an expandable/collapsible tree view for hierarchical data like file systems and category trees.

Example

$(function() {
  $(".tree-parent").prepend("<span class='tree-icon'>▶</span>");
  $(".tree-parent .tree-icon").on("click", function() {
    const $parent = $(this).parent();
    const $children = $parent.children(".tree-children");
    const open = $children.is(":visible");
    $children.slideToggle(150);
    $(this).text(open ? "▶" : "▼");
    $parent.attr("aria-expanded", !open);
  });
  // Keyboard support
  $(".tree-parent").on("keydown", function(e) {
    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); $(this).find(".tree-icon:first").trigger("click"); }
  }).attr("tabindex","0").attr("role","treeitem");
});

JAVASCRIPT

Full Editor

Pro Tip

Add role="treeitem" and aria-expanded to each node for full ARIA tree widget compliance.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned