The Disclosure component lets users show and hide sections of content on a page. Content within disclosures are generally considered supporting content that only a subset of users will find relevant.
Usage
Do’s
Use disclosures when you want to provide relevant or related information without cluttering the page.
Dont’s
Don’t use a disclosure when content is relevant to all users.
Don’t use disclosures in list. Use Accordion instead.
Don’t use a disclosure when content within the accordion is very complex or can cause slow page loads.
Anatomy
Insert image here
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | List item |
| Text |
|
2 | Item title |
| Text |
|
3 | Item content |
| RTA |
|
Visual style
n/a
Editorial
Keep disclosure titles short, but long enough to clearly communicate what a user can expect to find inside. This is especially required for unsighted users.
Behaviour
Disclosure items are collapsed by default.
Disclosures are individually controlled with a toggle between expanded and collapsed.
Disclosures includes hover, focus and disabled and active states. CSS ‘focus-visible’ will remove visual focus for mouse-controlled accordions.
Mouse click or touch on the disclosure title will toggle between expand and collapse.
Once focused, Enter or Space on a keyboard will toggle expand or collapse.
Where Javascript is disabled, all disclosures are expanded by default and expand/collapse controls are not present.
Accessibility
Related components