Page contents Page contents 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. Example Closed state Open state 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
