demo · v140

Details Tree

A nested <details> tree with a single delegated toggle listener at the root. The listener reads event.source to discover which element actually fired — useful when a programmatic open shouldn't be analytics-logged, but a user click should.

Vehicles

Cars

Sedan

Lorem ipsum.

Coupe

Lorem ipsum.

Trucks

Pickup

Lorem ipsum.

document.body.addEventListener("toggle", (e) => {
  if (!e.target.matches("details")) return;
  const who = e.source ? "user clicked " + e.source.tagName : "programmatic";
  log(`toggled ${e.target.querySelector("summary").textContent} (${e.newState}) — ${who}`);
});

see also