Expand Collapse Section

Expand/Collapse Section

The expand/collapse section identifies how to approach additional fields in a form that are not commonly used.

Collapsed

Image of collapsed section

Expanded

Image of expanded section

Expand/Collapse Section

Collapsed

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 Advanced Options” text denotes that the section will expand on click.

  2. Divider Line: The divider line provides a distinction between the “Advanced Options” area and the sections above.

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

Image of expanded section

  1. Caret Icon and Label: When expanded, the caret icon faces down. The “Hide Advanced Options” denotes that the section will collapse on click.

  2. Expanded Content: The content under “Advanced Options” is shown underneath the divider line when the section is expanded.

  • View Angular PatternFly Example
  • View PatternFly NG Example
  • View PatternFly React Example

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.