Accordion
An accordion is a stack of expandable panels — a title you click to reveal its content, one at a time.
What it is
An accordion is a stack of expandable panels: a title you select to show or hide its content, each panel on its own. Use it to pack a lot of optional detail — FAQs, steps, reference sections — into a short, scannable page, so readers open only what they need. Select any title below to edit it, or click into a panel to edit its content.
- Accordion(opens in new window)
How to add it
Add an Accordion block, then add a panel for each section. Give the panel a title — the clickable heading — and fill it with any blocks: text, images, a link list, whatever the section needs. Add, remove and reorder panels as you go.
Configure it
Panels
Each panel is a title plus its own content. A panel can be set to open by default, so its content shows when the page loads; the rest stay collapsed until selected.
Expand / collapse all
Turn on the expand / collapse all buttons to let readers open or close every panel at once — useful when someone wants to scan or print the whole thing.
Tips
Keep titles short and specific so readers can tell at a glance which panel holds what they want.
Don't hide content people need to read in order or all at once — an accordion keeps each panel closed until a reader opens it. For a few clearly-named sections shown side by side, use tabs instead.
Related pages
Example
Details variation (CSS-core)
Regular
Integrating content into agile workflows
Build content into the sprint from day one. Treat words as part of the product, not an afterthought. Add content tasks to the backlog and review them in stand ups alongside design and development.
Collaborate with product owners to define a clear Definition of Done for content. Encourage early reviews of copy within design critiques so language decisions move at the same pace as the interface.
- Join daily stand ups and retrospectives to stay aligned
- Include content tickets in sprint demos
- Track feedback and updates using the same agile tools as your team
Designing simple paths through complex tasks
Start by naming the single outcome the user needs to achieve. Remove anything that doesn’t help them get there.
Structure the page like a conversation: set expectations up front, group related steps, and explain why you’re asking for information.
- Lead with clear, task‑focused headings
- Break long processes into confident, named steps
- Use examples only where users typically hesitate
Partnering with subject matter experts
Make it easy for SMEs to help. Share a short agenda and a live doc. Ask them to walk a realistic scenario instead of describing the system.
Capture source links and who approved wording so changes are auditable. Follow up with a redline or prototype to make feedback fast.
- Record facts with dates and owners
- Translate jargon into plain language
- Agree on the exact words users will see
Single item (no wrapper)
Sprint cadence or workflow
Join the team’s rhythm early. Be part of stand ups, planning sessions, and retros to spot content needs before they become blockers. Work closely with design and engineering to align intent and tone.
Keep a living content backlog and track it with the same tools your team uses for features. Make small, iterative improvements instead of waiting for a rewrite cycle.
Toggle controls (progressively enhanced)
Embedding content design in agile delivery
Bring content into every stage of the sprint, not just the end. Treat it like any other design asset: plan it, review it, and test it early.
When copy and interface evolve together, teams avoid last‑minute rewrites and mismatched intent.
Making complex information easy to follow
Help users reach their goal quickly. Use strong verbs and avoid multi‑step sentences that hide the action.
- Cut instructions down to what matters
- Show one decision at a time
- Keep headings short and concrete
Sometimes a simple label swap or reordered field makes the biggest difference.
Collaborating with subject matter experts
Ask SMEs to explain how people actually use a service, not just how it works on paper. Listen for pain points or unclear language that can inform your content choices.
Keep notes visible to everyone so edits don’t get lost. A few short comments are better than one long document review.
Follow up with a quick playback—what you heard, what will change, and what stays the same.