∞ forever components

UI Micro-interactions

Accordion Expand

Three FAQ panels smoothly expand and collapse with a CSS height transition; a chevron rotates 180 degrees to indicate open state. Auto-cycles as demo.

csslight complexitysubtle motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

FAQ sections, product detail pages, settings panels — any context needing collapsible content with clear open/closed affordance.

When not to

Remove auto-cycle timer before shipping in production. Not suitable when all answers must be visible simultaneously. Autonomous preview ends at first deliberate input and never resumes.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the accent color from #DA3E8C to #C0B459, add a fourth FAQ item with question 'Privacy' and answer 'We never sell your data.', and increase the step interval to 3000ms. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • FAQ data array (data)
  • chevron accent color (#DA3E8C)
  • auto-cycle interval (2200ms) Autonomous preview ends at first deliberate input and never resumes.
  • panel background (#211c33)
  • transition duration (.34s cubic-bezier)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • height-to-auto trick via transitionend listener
  • IIFE-equivalent const scoping
  • prefers-reduced-motion guard on loop()
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

  • Auto-cycles by default — remove setInterval loop before production use
  • No aria-expanded on trigger elements — add for full accessibility
  • Panel width capped at 230px max-width; may feel narrow on desktop
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

accordionexpandfaqchevronui-controlmicrointeractionclick

More UI Micro-interactions components

  • Add to Cart FlyNative Add button flings a product clone into a cart; first input cancels unfinished attract flights, while each manual action keeps its full 680ms flight…
  • Notification BellSVG bell swings and rings with a ripple wave on click; a red badge counter pops in with a springy bounce and increments each ring. Auto-cycles every 2…
  • Copy ConfirmCopy icon morphs to a drawn-stroke checkmark with a green button flash and a "Copied!" toast on click; auto-cycles as a demo loop.
  • Swipe Card StackTinder-style draggable card stack — drag the top card left/right to reveal NOPE/LIKE stamps; fling-away animates it off-screen and cycles to the next card.
  • Pull to RefreshA phone-frame list supports pointer/touch pull and a native Refresh button. First input stops attract refreshes; manual refresh completes its spinner, row…
  • Tooltip PopHeart icon button springs a mint-green tooltip above it on hover with a cubic-bezier spring pop; click triggers a subtle press-bounce via Web Animations API.