| Table of Contents |
|---|
...
General guidelines
The first item section is open by default.
Only one accordion item section is open at any time.
An open item section is stretched to its maximum possible height (not limited to its content), pushing items sections below it to the bottom of the container.
...
A title - the title text can wrap up to two lines of text, but it is not recommended (always keep it short and to the point).
A chevron icon (included in the Verint Font Icon).
In case the content was changed, a mark (blue dot) is added to the header of the section.
In case the entire section is selectable, a checkbox will appear in the header, before the title
In case there is a warning or an error on a section, an icon will appear at the right side of the header
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.
...
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.
...
In case the accordion contains a long list, consider using Search within the section.
Use clear labels: they need to clearly describe the hidden content.
...