# Accordion Patterns

> Accordion and collapsible content patterns, FAQ layouts, and progressive disclosure.

- Skill: `dragoon0x/accordion-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/accordion-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/accordion-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/accordion-patterns

---


# Accordion Patterns

## Accordion Rules
1. **Only one open at a time** for simple content (FAQ). Allow multiple open for settings/forms.
2. **Header is the full click target.** Not just the chevron.
3. **Chevron rotates** on open (down → up or right → down).
4. **Smooth animation** on expand/collapse (200-300ms).
5. **Default state:** first item open, or all closed.

## When to Use
- FAQ pages (classic accordion use case).
- Settings with grouped options.
- Mobile navigation with sub-items.
- Long forms with optional sections.

## When NOT to Use
- Content that most users need to see (don't hide important information).
- Fewer than 3 items (just show them all).
- Sequential content (use tabs or stepper instead).