File Explorer Expand/Collapse Implementation

File Explorer Expand/Collapse Implementation

Expand/collapse is the core interaction of a file explorer. Here is how to implement it.

Basic Toggle

div.addEventListener("click", (e) => {
  e.stopPropagation();
  const childrenContainer = div.nextElementSibling;
  const isVisible = childrenContainer.style.display !== "none";
  childrenContainer.style.display = isVisible ? "none" : "block";
});

Icon Toggle

const icon = div.querySelector(".icon");
icon.textContent = isVisible ? "📁" : "📂"; // closed/open folder

Expand All / Collapse All

function expandAll() {
  document.querySelectorAll(".children-container").forEach((c) => c.style.display = "block");
}
function collapseAll() {
  document.querySelectorAll(".children-container").forEach((c) => c.style.display = "none");
}

State Persistence

Track expanded folders in a Set:

const expanded = new Set();
div.addEventListener("click", (e) => {
  e.stopPropagation();
  if (expanded.has(node.path)) {
    expanded.delete(node.path);
    childrenContainer.style.display = "none";
  } else {
    expanded.add(node.path);
    childrenContainer.style.display = "block";
  }
});

Keyboard Support

div.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    div.click();
  }
  if (e.key === "ArrowRight" && !isExpanded) expand();
  if (e.key === "ArrowLeft" && isExpanded) collapse();
});

The Takeaway

Expand/collapse: toggle children display on click, update icon (open/closed), stopPropagation to prevent parent toggling, expand/collapse all buttons, state persistence with a Set, and keyboard support (Enter, Arrow keys). These make the file explorer feel like VS Code.