Expandable section

An expandable section has two main elements.

1. Toggle (fa-angle-right): Indicates whether the section is expanded or collapsed.
2. Toggle text: Informs the user what will be shown when the component is expanded.

Use an expandable section when you want to hide optional or advanced content by default. They are commonly used in forms to reveal plain text or additional form fields. They can also be used to reveal charts, cards, data lists, or table views. Expandable sections can also be used in alerts to show additional information.

We recommend using dynamic toggle text for an expandable section, which will update the toggle text based on the state of the expandable section. For example, it may read Show more when the toggle is collapsed, and Show less when the toggle is open.

For more information regarding accessibility, visit the expandable section accessibility tab.