Expand/Collapse Section

Overview

This pattern defines how you might collapse and expand additional fields in a form that are not commonly used.

Examples

Collapsed Section

Image of collapsed section

Expanded Section

Image of expanded section

Expand/Collapse Section

Collapsed Section

Image of collapsed section

  1. Caret Icon and Label: The caret icon indicates that you can expand or collapse the section. By default, the advanced section is collapsed. The collapse / expand section displays text as a blue link. The “Show” text explains that clicking on the text will expand the area.

  2. Divider Line: The divider line is used to divide the two distinct sections.

    *Please note: if there is not a specific grouping label, “Show Advanced Options” is a possible generic label option. If there are more specific labels that help users to understand the context of what is being hidden then it is recommended that you use those labels to improve usability.

Expanded Section

Image of expanded section

  1. Caret Icon and Label: When expanded, the caret icon will be facing down. The “Hide” text explains that clicking on the text will collapse the area.

  2. Additional Fields: Will be shown under the divider line when section is expanded.