File Tree Explorer — Free HTML CSS JS Snippet

Most "collapsible tree" tutorials fake the animation with display: none, which snaps open and closed with no transition at all, or they skip keyboard support entirely and only work with a mouse. This snippet builds a VS-Code-style file explorer that does neither: folders slide open and closed with a real measured height transition, every folder row has a rotating chevron, files get a small colored icon keyed off their extension, and the whole tree is fully operable with arrow keys the way a real IDE sidebar is.

The height:auto transition problem, solved

CSS cannot transition to or from height: auto (or max-height: none) because the browser has no fixed numeric value to interpolate toward — "auto" is a layout instruction, not a length. The common broken fix is to hardcode a max-height guess like 500px, which either clips tall folders or leaves a visible empty gap under short ones once the transition finishes. This snippet uses the standard measure-then-transition technique instead: when a folder opens, animateHeight() reads the child list's scrollHeight — which reports the element's true rendered content height even while its max-height is still clamped to 0px, because scrollHeight measures the content box regardless of overflow clipping — and sets max-height to that exact pixel value. Now the CSS transition has two concrete numbers (0px and, say, 184px) to animate between, so it plays smoothly. A transitionend listener then swaps max-height to none once the animation finishes, so if a nested child folder opens later and the list needs to grow taller, it is not clipped by a now-stale fixed pixel value.

Closing needs an extra frame, not just a class removal

Collapsing is trickier than opening. If max-height is currently none, setting it directly to 0px skips the transition entirely, because the browser has no starting numeric value to animate from. The fix is to first set max-height to the current scrollHeight (a real pixel number, functionally a no-op visually since the content is already that tall), force the browser to acknowledge that value on the next animation frame, and only then set max-height to 0px on a second nested requestAnimationFrame. That double rAF is a deliberate paint-cycle wait: the first frame lets the browser commit the "start" height as a real style, and the second frame issues the "end" height as a separate change the transition engine can actually interpolate, rather than both writes collapsing into the same layout pass and skipping the animation.

Per-extension icons via a lookup table

Icons are resolved with a plain object, EXT_ICONS, mapping a lowercased file extension (js, css, html, json, md, png) to a background color and short label, with a default fallback for anything unrecognized. iconFor() splits the filename on '.', takes the last segment as the extension, and looks it up — a pattern that is trivial to extend by adding new keys, and cheap enough to run on every file row at render time with no caching needed.

Roving tabindex and arrow-key navigation

Only one row in the whole tree has tabIndex = 0 at any moment (the currently focused one); every other row sits at tabIndex = -1 so Tab moves focus into and out of the tree as a single stop, not once per row. setFocus() moves both the .focused CSS class and the actual DOM focus() call together. The keydown handler on the tree root computes a flat, order-preserved list of only the currently visible rows via visibleRows() — walking up each row's ancestor .children containers and checking whether the owning folder is open — so ArrowDown/ArrowUp always step to the next visually-adjacent row, skipping collapsed subtrees entirely rather than jumping into hidden content. ArrowRight either expands a closed folder or, if already open, moves focus into its first child (mirroring how VS Code, Windows Explorer, and macOS Finder's list view all behave). ArrowLeft either collapses an open folder in place or, if it is already collapsed (or is a file), moves focus up to the parent folder row — the standard "collapse or go up" behavior every desktop file browser implements.

Why this beats a display:none tree

Because the animation is driven by real max-height values rather than a hard show/hide toggle, the chevron rotation, the slide transition, and the eventual none/0px cleanup are all handled by ordinary CSS transitions with no JavaScript animation loop and no risk of layout thrashing from repeated reflows — the browser's compositor handles the interpolation once the two endpoint values are set.