DesignDojo
1.2-components · 12-accordion

Estimated time: 6 min

Accordion anatomy

When to Use

  • FAQ and help sections with many optional details.
  • Settings groups where advanced fields are rarely needed.
  • Mobile layouts when full content would create extreme scrolling.

When NOT to Use

Use accordion items with clear headings so collapsed content is still understandable.

If content is short and always needed, keep it visible in a normal stack.

Variants

Single-open
Multi-open
Icon-left trigger

Confused?

Use Accordion for on-page reveal, and use Modal when the task needs focused interruption.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement an accessible accordion for FAQ content with smooth expand/collapse, clear open state, and keyboard support.

Pencil Prompt

Design an accordion list with one expanded item and distinct trigger styling that communicates click-to-reveal behavior.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Button