Back to Dictionary
Page & View Transitions
●○○Ready to Use
Accordion Expand
A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.
Live Demo
Framer Motion is a production-ready motion library for React that makes creating animations incredibly simple and declarative.
What It Is
A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.
✓When to Use
- FAQ sections
- Complex forms with optional sections
- Collapsible sidebars
✕When NOT to Use
- Primary content that all users must read
Configuration Tips
- 01Animate grid-template-rows from 0fr to 1fr for performant pure CSS height animation
- 02Rotate the chevron icon 180deg during expansion
You've Seen It In
Tailwind UIStripeNotion
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add an accordion section for FAQs. When clicking the question, the answer should slide down smoothly.
Code Example (Tailwind CSS)
export function AccordionExpandDemo() {}