Accordion reveal

Make it fit your project.

Use a button with aria-expanded and aria-controls. Animate a grid row from 0fr to 1fr over 200ms with overflow hidden on the inner wrapper. Fade in the answer slightly after expansion begins. Keep focus on the heading button.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Use a button with aria-expanded and aria-controls. Animate a grid row from 0fr to 1fr over 200ms with overflow hidden on the inner wrapper. Fade in the answer slightly after expansion begins. Keep focus on the heading button.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Collapsed content must be inert or unmounted so it cannot receive focus.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.