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.

Usage & Behavior

Open

General guidelines

• The first section is open by default.

• Only one section is open at any time.

• An open section is stretched to its maximum possible height (not limited to its content), pushing sections below it to the bottom of the container.

Structure

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

Header

The header contains:

• 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). If the title exceeds two lines it will be truncated, showing a tooltip on hover.

• 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 on 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. 

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.

Section Header States

State	Open	Closed	Comment

State	Open	Closed	Comment
Regular	NA	Open
Hover
Active
Selected		NA
Focus	NA
Focus Selected

Section Header States - Special Cases

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.

• 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. (see Code section below)

Best practices

Use:

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

• when wanting to minimize scrolling.

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

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

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code