A Collapsible is a component used for containing information that you may not want to surface at the page or screen level, but needs to be findable.
Examples
Basic
Similar to accordions or tabs, a Collapsible toggles to open and reveal more content below. They come in four sizes, the different sizes are reflected in the font size of the link, these sizes correspond to the sizes of the other form elements.
Sizes
User experience
Be careful not to hide important information inside a Collapsible. There is a temptation to use it as a “dirty closet” to keep your page free of clutter or “minimalist”, however this approach ignores the task based scenarios of users who are attempting to accomplish something and could reduce the efficacy of your design.
Pay particular attention to content which may be important product information or deemed legal compliance, and always check with Risk and Compliance.
Visual design
The Collapsible is based on a button link and leverages the same styling with the addition of a Primary coloured chevron. The chevron is an important aspect of making the Collapsible meet WCAG accessibility standards.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.