Login

Accordion component

It can be used during the main testing phase or post launch but
requires a large sample size for accurate results.

Written by: John Deep Synonyms: Expandable menu, Dropdown panels Platform: ios, Android, Web

What is and accordion component?

Accordion is a vertical stack of collapsible containers that reveal or hide sections of content.

  • 1.

    Users can click on the accordion headers to expand or
    collapse content panels, revealing more details
    only when they need them.

  • 2.

    Some accordions allow only one section to be open at at
    time, while others support multiple open sections
    at the same time.

  • 3.

    Accordion panels usually have animations to aid transitions
    so that the experience is smooth.

Accordions are commonly used in the following design patterns:
FAQ, Product features or specifications, Filtering & sorting.

Fun fact: The term "accordion" in UI design is inspired by the musical instrument accordion, which expands and contracts to produce sound—just like how UI accordions expand to reveal content and collapse to hide it.