Docs

Docs

Accordion

Accordion is a vertically stacked set of expandable panels.

This component reduces clutter and helps maintain the user’s focus by showing only the relevant content at any time. Below is some sample code using Accordion, which is referenced a few times on this page:

<Accordion>
  <AccordionPanel summary="Personal information">
    <VerticalLayout>
      <span>Sophia Williams</span>
      <span>sophia.williams@company.com</span>
      <span>(501) 555-9128</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Billing address">
    <VerticalLayout>
      <span>4027 Amber Lake Canyon</span>
      <span>72333-5884 Cozy Nook</span>
      <span>Arkansas</span>
    </VerticalLayout>
  </AccordionPanel>

  <AccordionPanel summary="Payment">
    <VerticalLayout>
      <span>MasterCard</span>
      <span>1234 5678 9012 3456</span>
      <span>Expires 06/21</span>
    </VerticalLayout>
  </AccordionPanel>
</Accordion>

Composition

Accordion composed of stacked panels, each consisting of two parts: a summary and a content area. You can see this in the code in the previous section. These parts are explained in the following sub-sections.

Only one panel can be expanded at a time. However, you can use the Details component to allow multiple, simultaneously expanded sections.

Summary Part

The summary is the part that’s always visible. It typically describes the content, for example, with a title. In the previous example, the words Personal Information, Billing Address, and Payment are the summaries and what is always visible. Clicking on a summary toggles the visibility of its content area: expanding or contracting the content.

The summary supports rich content and can contain any component. This can be utilized, for example, to display the status of the corresponding content.

Content Part

This is the collapsible part of a panel. In the previous example, the person’s name, email address, and telephone number are the content of the first panel.

As mentioned, content can contain any component. When an item is collapsed, the content is invisible and inaccessible by keyboard or screen reader.

Theme Variants

Accordion has three theme variants: filled, small, and reverse. You would set the theme attribute for each panel, not on Accordion itself. Theme names can be combined with each other. For example, all three themes — filled, small, and reverse — can be applied to a panel. Below are descriptions of each theme variant.

Filled Panels

The filled theme variant makes the panel’s boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI.

Small Panels

Use the small theme variant for compact UIs.

Reverse Panels

The reverse theme variant places the toggle icon after the summary content. This can be useful for visually aligning the summary with other content.

Disabled Panels

Accordion panels can be disabled to prevent them from being expanded or collapsed. Details can be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded panel are automatically disabled.

Best Practices

  • Accordions are suitable when users need to focus on smaller pieces of content at any given time. However, when all content is relevant to the user making a decision, Accordions should be avoided.

  • Content that is logically linked should be grouped together in one panel.

  • Although Accordions are better suited than Tabs for long labels, Accordions can feel "jumpy" as panels are toggled — in particular if there are several panels or if a panel’s content is long.

  • Details can be used instead of Accordion when there is a need to see content from multiple panels, simultaneously.

  • Accordions are useful when you want to consolidate a complex form into smaller step-by-step sections.

  • The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. When this is a possibility, use the filled variant and apply tooltips on the panels to make them more discoverable.

Component Usage Recommendation

Details

Single collapsible panel.

Tabs

Component for organizing and grouping content into navigable sections.
Important
 You can find more information in the corresponding article on vaadin.com.