Accordion Block

Accordion blocks can help simplify long pages and reduce scrolling. However, they also reduce content visibility and introduce an extra step for users, who must expand each section to view the information.

Accordion Best Practices

An accordion may be a good option when users only need to view a few sections of content. If most or all of the content is relevant to the user, it’s better to structure the page with clear headings and paragraphs, even if it results in a longer page.

• Effective uses for accordions include FAQs or step-by-step instructions where users typically need to access only one item at a time.
• Use concise, descriptive section titles that clearly communicate the content within.
• Avoid placing important or critical information inside an accordion. For example, avoid placing large blocks of program requirements, schedules or other decision-making content inside accordions.
• In general, you should not need to use headings inside accordion content - if you need to use headings, the content may be too complex for an accordion. However, if you do need to use headings in accordion content, maintain proper heading structure inside accordion content. Use headings in logical order (H2 → H3 → H4) based on structure, not based on font size.
• Accordion content is still accessible to users, AI agents and search engines, but content that is immediately visible on the page is generally easier to scan and discover.
• Consider mobile users: If accordion sections are long, users may need to repeatedly expand/collapse content and scroll extensively.