Expand / Collapse

Description

Expand / collapse is an interaction pattern for hierarchical data that lets users click on a node to reveal its children (expand) or hide them (collapse). In a tree diagram, clicking a parent node opens its subtree; clicking again folds it back. In a treemap, clicking a category might expand it to show subcategories. The pattern gives users control over how much detail is visible at any time, letting them open only the branches they care about while keeping the rest of the hierarchy compact.

This is one of the oldest interaction patterns in computing — every file manager, every DOM inspector, and every table of contents uses expand/collapse. In data visualization, it is most natural for tree-structured data: organizational hierarchies, file systems, taxonomies, and nested categories. The interaction preserves context better than drill-down (which replaces the entire view with a sub-level) because expanded and collapsed nodes coexist in the same view, letting the user see the focal branch in the context of its siblings and parents.

The visual design of expand/collapse typically uses disclosure triangles, plus/minus icons, or chevrons to indicate whether a node can be expanded and its current state. Animated transitions — branches growing outward, children fading in — help the user track what changed. The layout must reflow to accommodate newly visible children, which can cause disorienting jumps if not animated smoothly. Force-directed tree layouts handle this gracefully because the physics simulation naturally finds room for new nodes.

When to Use

• When the data is hierarchical and the full tree is too large to display at once.
• When users need to explore specific branches in detail while keeping the rest of the hierarchy visible but compact.
• When the depth of the hierarchy varies and some branches are much deeper than others.
• In organizational charts, file browsers, taxonomy explorers, and nested category views.
• When context matters — the user needs to see the expanded branch relative to its siblings and parents.

When NOT to Use

• When the hierarchy is shallow (only 2 levels) — all children can be shown at once without needing expand/collapse.
• When the user needs to see the full structure at all levels simultaneously — a static tree or treemap is better.
• When the hierarchy has an extremely high branching factor (hundreds of children per node) — expanding one node would overwhelm the view.
• When the data is not hierarchical — there is nothing to expand or collapse.
• When drill-down is more appropriate — the user wants to focus entirely on a sub-branch and does not need sibling context.

How It Works

1. Nodes that have children display an expand indicator — a triangle, plus icon, or chevron.
2. The user clicks the indicator or the node itself to expand it.
3. An animated transition reveals the child nodes: they fade in, slide out from the parent, or grow into position.
4. The layout reflows to accommodate the new nodes — sibling branches shift to make room, or the overall tree grows.
5. The expand indicator changes to a collapse indicator (triangle rotates, plus becomes minus).
6. Clicking the indicator again collapses the node, hiding its children with a reverse animation.
7. Deeply nested expansions are independent — the user can expand node A’s children without affecting node B’s state.

Variations

• Tree node expand: The classic form. Each node in a node-link tree can independently expand or collapse. Used in file browsers and org charts.
• Accordion: Only one section can be expanded at a time; expanding a new section collapses the previous one. Common in settings panels and FAQ lists.
• Treemap zoom-expand: Clicking a treemap rectangle expands it to fill the view, showing its children. Often combined with a breadcrumb trail for navigation.
• Progressive disclosure: Content is revealed in stages — first a summary, then details, then raw data — each requiring an explicit expand action.
• Expand-all / collapse-all: Bulk buttons that expand or collapse the entire tree to a specified depth. Useful for quick overview/detail switching.
• Lazy expand: Children are fetched from a server only when the user expands a node. Essential for very large hierarchies.

Code Reference

// D3.js collapsible tree
function toggle(d) {
  if (d.children) {
    d._children = d.children;  // hide children
    d.children = null;
  } else {
    d.children = d._children;  // show children
    d._children = null;
  }
  update(d);
}

function update(source) {
  const treeData = treeLayout(root);
  const nodes = treeData.descendants();
  const links = treeData.links();

  // Animated node enter/update/exit
  const node = svg.selectAll(".node")
    .data(nodes, d => d.data.id);

  node.enter().append("g")
    .attr("class", "node")
    .attr("transform", `translate(${source.y0},${source.x0})`)
    .on("click", (event, d) => toggle(d))
    .append("circle")
    .attr("r", 6)
    .style("fill", d => d._children ? "#4a90d9" : "#fff");

  node.transition().duration(500)
    .attr("transform", d => `translate(${d.y},${d.x})`);
}