Expand Collapse Section
The expand/collapse section identifies how to approach additional fields in a form that are not commonly used.
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.
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.
Caret Icon and Label: When expanded, the caret icon faces down. The “Hide Advanced Options” denotes that the section will collapse on click.
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
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.