| Table of Contents |
|---|
Description
An accordion is a list of headers that hide or reveal additional content when selected.
An accordion is
| Table of Contents |
|---|
Description
An accordion is a list of grouped content items that allow the user to hide or reveal additional content as needed.
The accordion component delivers large amounts of content in a limited space through progressive disclosure. It is similar in purpose to a tabbed interface: a list of items where only one item is expanded into a panel at once.
The list items are effectively shortcuts to access separate content sections.
Usage & Behavior
...
An accordion should be used:
To allow users to have control over the content, by expanding what they want to read and hiding what they want to ignore.
Where there’s only a small space in which to display a lot of content.
When wanting to minimize scrolling.
To make lots of content appear less daunting, by allowing the user to focus on one part at a time.
...
.
Usage & Behavior
...
General guidelines
The first item is open by default.
Only one accordion item is open at any time.
An open item is stretched to its maximum possible height (not limited to its content), pushing items below it to the bottom of the container.
Structure
Each section of the accordion must include a header and a content panel.
Header
- Header
A title. The title text can wrap, but it is recommended that it is short and to the point.
- The
A chevron icon
is(included
as ain the Verint Font Icon).
- A
In case the content was changed, a mark (blue dot)
should beis added to the header of the
opensection.
Content panel
The open section has no maximum height. However, it must follow the other padding specs below.
The open section height should be a minimum of 3 text rows.
The width of an accordion can vary depending on the content, layout, and page design.
Scrolling
Accordions take up 100% width of their parent container.
Scrolling should be added to content sections which exceed the height of the accordion container.
Default state
The first content section in the accordion should be open when first loading the page.
Internal Logic
The accordion component delivers large amounts of content in a small space through progressive disclosure.
The user gets key details about the underlying content and can choose to expand content sections within the constraints of the accordion.
Accordions work especially well where vertical space is limited.
States (TBD - not final design)
...
State
...
Image
...
Comment
...
Section header closed
...
Section header open
...
Section header hover
...
Selected content mark
...
Special States (TBD - not final design)
...
State
...
Image
...
Comment
...
Selected content mark
...
Section header with checkbox
...
Section header with warning
...
Interaction
You can click on any part of a section header to select (open) it.
There's always one section open in the accordion.
Only one section can be open at a time.
When opening a new section, the previously-open section should close automatically.
When closing an open section, the section beneath it should open automatically. Closing the last section in the accordion should automatically open the section directly above it.
Hovering over a section header should show a tooltip with the full name of the section header.
Transitions
Selected sections should slide open, while the previously-open section slides closed at the same time.
...
Best practices
Use:
...
For long lists, consider using search.
...
Section Header States
State | Open | Closed | Comment |
|---|---|---|---|
Regular |  | ||
Hover |  | ||
Active | |||
Selected |  | ||
Focus | |||
Focus Selected |
Section Header States - Special Cases
State | Image | Comment |
|---|---|---|
Changed content mark |  | |
Section header with checkbox |  | |
Section header with warning |  |
Interaction
You can click on any part of a section header to select (open) it. This has two exceptions:
When a checkbox is shown, clicking it selects/deselects the checkbox.
When a warning icon is shown, clicking it opens a tooltip.
When opening a new section, the previously-open section should close automatically.
When closing an open section, the section beneath it should open automatically. Closing the last section in the accordion should automatically open the section directly above it.
In case the title is longer than its container, hovering over a section header should show a tooltip with the full name of the section header.
Transitions
Selected sections should slide open, while the previously-open section slides closed at the same time.
...
Best practices
Use:
Accordions work especially well where vertical space is limited.
To allow users to have control over the content, by expanding what they want to read and hiding what they want to ignore.
Where there’s only a small space in which to display a lot of content.
When wanting to minimize scrolling.
To make lots of content appear less daunting, by allowing the user to focus on one part at a time.
Where users will only need a few specific pieces of content from within a page.
Where there’s only a small space in which to display a lot of content.
Don’t use:
If users need to see most or all of the information on a page. Use well-formatted text instead.
If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about which headers to click on.
General
In case the accordion contains a long list, consider using search.
Use clear labels: they need to clearly describe the hidden content.
Usability guidance:
Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device).
...