Accordion

Use this area to provide detailed content related to the accordion item title above. This can include explanations, examples, links, or supporting visuals that expand on the topic. The goal is to give users the information they need without overwhelming the page—accordion items help organize content in a way that’s easy to scan and explore. Keep the content clear, concise, and focused on helping users make informed design or development decisions.

• To break up long pages of related content into smaller, more scannable sections.
• When users may only need to view one or two sections of content at a time.
• To provide optional, supporting, or detailed information without overwhelming the main page layout.
• For FAQs, help text, or reference materials where content can be grouped by topic.
• When conserving vertical space is important to the page design.

• Using an accordion for content that most users will need to see immediately—if it’s critical, keep it visible.
• Nesting multiple accordions inside one another (can confuse users and complicate navigation).
• Overusing accordions so that key information becomes hidden or harder to find.
• Using an accordion to artificially shorten a page when a clear page structure or navigation would serve better.
• Placing very short or minimal content inside accordion panels (can add unnecessary clicks without benefit).

• Use clear headings.
• Use keywords in headings.
• Group related information or content in the same section for fewer clicks.