v147 · CSS · Animation · demo

FAQ Accordion

An FAQ accordion where each item transitions independently using element-scoped view transitions. Open two items in rapid succession — both animate concurrently on their own scopes. Disable transitions to compare the bare CSS max-height expand.

Chrome 147+ — element-scoped view transitions (view-transition-class + startViewTransition() on an element). In older browsers the accordion still works using CSS max-height animation.

Click any question to expand it · open multiple quickly to see concurrent transitions · toggle "Use view transitions" to compare

Click a question to begin
// Element-scoped view transition on an accordion item
// Chrome 147+: Element.prototype.startViewTransition()

button.addEventListener('click', () => {
  // Each item transitions independently — no blocking
  accordionItem.startViewTransition(() => {
    accordionItem.classList.toggle('open');
  });
});

// Multiple items can transition at the same time — no queue.
// Without element-scoped:
// document.startViewTransition(() => { ... })  ← blocks until done
// With element-scoped:
// itemA.startViewTransition(...)  ← runs independently
// itemB.startViewTransition(...)  ← runs at the same time

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗