Tree Menu — Free HTML CSS JS Snippet

Open a file explorer with two thousand files dumped into one flat list and you'd never find anything — fold the same two thousand into folders-within-folders, and suddenly they're navigable, because at any moment you only have to look at the dozen or so that share your current context. This snippet builds that exact structure: a nested list of folders and files, each folder a click away from expanding or collapsing with a smooth height animation, a chevron that rotates to mirror its state, single-file selection, and a "collapse all" shortcut for when a dozen open folders have turned the sidebar into its own thing to scroll through.

Animating a height nobody can know in advance

CSS transitions height cleanly between two known values, but a folder's expanded height depends entirely on how many files and subfolders happen to be inside it — a number this snippet has no way to know ahead of time. The workaround is max-height: collapsed subtrees sit at max-height: 0 with overflow: hidden, and .open ones jump to max-height: 1000px — not because any real subtree is that tall, but because it's comfortably larger than any realistic one. transition: max-height 0.25s ease animates between the two, and because the browser only ever paints the *actual* content height, the motion reads as if it's measuring the real size, even though it's really racing toward an arbitrary ceiling and stopping early. It's the same trick the Accordion / FAQ snippet leans on to expand its answer panels.

One class name driving two animations at once

toggle() does exactly one meaningful thing: it flips .open on the folder's list item. Everything visible after that — the subtree sliding open via max-height, and the chevron rotating via transform: rotate(90deg) on .tree-node.folder.open .chevron — is pure CSS reacting to that single class change. There's no separate "now rotate the chevron" call to keep in sync with "now expand the subtree": if one fires, so does the other, because both are just selectors watching the same toggle land.

Indentation that comes from nesting, not from counting

Working out how deep a node sits and assigning it a matching padding-left in JavaScript would mean walking the tree and threading a depth counter through every recursive call. This snippet skips that bookkeeping with descendant selectors instead: .subtree .node-row gets one padding value, .subtree .subtree .node-row gets a larger one, and so on — the *selector itself* encodes the nesting depth, so a folder three levels down ends up indented correctly purely because of where its markup physically sits in the document.

Selecting one file, and only one

selectFile() opens by stripping .active from every node that currently carries it — document.querySelectorAll('.tree-node.file.active').forEach(n => n.classList.remove('active')) — and only then adds it to the file just clicked. That "clear everything, then set the one thing" order is the simplest possible way to guarantee a single-selection invariant: there's no special case for "what if two were already active," because the first line makes that state impossible to reach. Right-click a node in a real file explorer, though, and you'd expect a menu of actions to appear — precisely what the Context Menu snippet adds on top of a tree like this one.

Closing everything in one pass

collapseAll() runs the inverse of toggle() across every currently open folder at once — stripping .open, adding .closed to each subtree, and resetting aria-expanded back to "false". It's a short function, but it fixes a real annoyance: after wandering deep into a tree, getting back to a clean overview shouldn't mean clicking a dozen folders shut by hand, one breadcrumb at a time.