Table of Contents

...

 State

Open

Closed

Comment

Regular

NA

Hover

Active

Selected

NA

Focus

NA

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.

...