Table of Contents

...

Each section of the accordion must include a header and a content panel.

Header

The header contains:

A title . The - the title text can wrap up to two lines of text, but it is not recommended that (always keep it is 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.

...

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.

...

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 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 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

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)

Don’t use:

if users need to see most or all of the information. In this case, use well-formatted text instead.
where the content can’t be divided into separate logic sections.
where there is not enough content to show on each section.

General

...