Accordion (UI pattern)

Accordions are commonly used to manage dense content without overwhelming the page layout. They help maintain visual simplicity while still giving access to detailed information. However, they introduce a tradeoff. Content hidden by default may be overlooked by users or deprioritized by search engines if not implemented carefully. Proper structure and accessibility considerations are key.

Why It Matters

‍Accordions are useful for organizing FAQs, product details, and long-form content, especially on mobile. From a UX perspective, they support scannability and pacing. From an SEO and AI perspective, the underlying content still needs to be structured clearly in the DOM so it can be indexed and interpreted, even when collapsed.

Example

A FAQ section where each question expands to reveal an answer, allowing users to scan topics before choosing what to read.