CSS Accordion Animation: AI-Generated Code Prompt Example

This prompt is designed for front-end developers and UI designers who need a lightweight, JavaScript-free accordion component. By leveraging the native HTML details and summary elements combined with CSS transforms and transitions, it produces a smooth, accessible expand-and-collapse animation without any external dependencies. This approach is ideal for FAQs, sidebars, or any content section where progressive disclosure improves readability.

The resulting code is easy to drop into any project and works reliably across modern browsers. You can extend the base output by adjusting easing curves, adding custom icons, or theming the component to match a design system. This prompt works best with models that have strong CSS knowledge, such as GPT-4 or Claude. Try variations like requesting a multi-level nested accordion, a horizontal slide variant, or a version styled to match a specific color palette to explore the full range of what pure CSS can achieve.