Overview
Use accordions to organize related content into clearly defined sections that improve readability, navigation, and content hierarchy.
Because accordion panels are open by default, learners can view all content without additional interaction. The accordion structure helps divide longer content into manageable segments, making it easier to scan, understand, and navigate complex information.
Accordions are most effective when content can be grouped into distinct topics, concepts, or examples. They should be used to improve organization and reduce cognitive overload, not simply to shorten a page or create visual variety.
Common Pitfalls to Avoid
- Using accordions for content that is too short to benefit from sectioning
- Creating too many accordion sections on a single page, making content difficult to scan
- Grouping unrelated content within the same accordion section
- Using accordions solely to reduce page length rather than improve content organization
CDD Tag
<accordion></accordion>
Guidelines
Do
ID
Organize Related Content into Meaningful Sections
Use accordions to group related concepts, topics, examples, or processes into clearly defined sections. Effective grouping improves content hierarchy, supports learner comprehension, and makes longer pages easier to navigate.
ID
Use Accordions to Structure Longer Content
Accordions are most effective when organizing substantial content into manageable sections. Use them to break up complex information, extended explanations, or multi-part topics into a format that is easier for learners to scan and process.
Production
Keep Accordions Open by Default
Accordion sections should remain open by default when content is important to the learning experience. Immediate content visibility reduces unnecessary interaction, improves accessibility, and helps ensure learners do not overlook essential material.
Do Not
ID
Production
Don’t Overuse Accordions on a Single Page
Using too many accordions within the same learning experience can overwhelm learners, weaken content hierarchy, and make important information harder to identify. Excessive expandable sections increase cognitive load by forcing learners to continually scan, open, and manage multiple content areas. Accordions should be used intentionally to support organization and readability, not as a substitute for clear page structure and thoughtful content design.
ID
Production
Don’t Nest Interactive Components Within Accordions
Avoid placing interactive components such as tabs, or additional accordions. Nested interactions increase cognitive load, complicate navigation, and can create usability and accessibility challenges, particularly on mobile devices.