The expandable component is used to disclose information progressively. It allows you to save vertical space, while giving users access to more detailed information if it is of particular interest.
| The expandable component allows short paragraphs to be hidden by default. Users can then selectively drill down to the content they are looking for. | Get the code and specifications |
| The expandable is not available on the Europa Web Publishing Platform as an individual component. It is used on the Person content type. | Try it out in the playground |
| Expandables should only be used when there's a need to condense content and the title heading can very accurately reflect the content itself. They should not be used for critical information. | |
| Expandables are not meant to facilitate the creation of very long pages. When in doubt, use sub-headings or move your content to separate child pages. On mobile, users may find it easier to scroll content than tap to expand a section. |
When to use
- use on long, text-heavy pages
- when you want to condense information that is not of critical importance (e.g. it's only needed by a small group of users)
- when you can make extensive and complex content easier to scan via descriptive labels
When not to use
- do not use on short pages (reading time under 3 minutes)
- consider moving content to a child page or pages rather than using expandables
Dos
- use a label that clearly identifies the hidden content
- only include a short paragraph of text within an expandable
Don'ts
- don't place large blocks of content in an expandable
- don't hide important information that should be present at all times (e.g. the location of a meeting)
- don't conceal targeted keywords that can help with your page's search engine ranking
- don't place links, images, or tables within an expandable
- don't stack expandables one after another - use the accordion instead