Page contents Page contents Accordions help users see only the content which is relevant to them. Accordion sections hide or reveal additional content. Accordions are used to truncate information. They help keep the interface clean and reduce scrolling by saving vertical space. They display easy-to-scan labels that tell users what additional content is available by clicking. Accordion labels should be as descriptive and concise as possible. Accordions present some usability issues, described below, so they should be used only in specific cases. How to build this in the Europa Web Publishing Platform (EWPP) Get the code and specifications Try it out in the playground Example Collapsed with expanded section When to use use for organising small, specific sections of content use accordions when you need to present multiple sections of content in a simple way on one page, without overwhelming the user (especially applicable to mobile) use only when it’s not critical for every user to read every section of content. When not to use accordions are not a suitable replacement for well formatted plain text. If a user requires all, or most of the information on the page, it should be visible, not hidden inside an accordion don't use when pages are short (reading time: under 3 minutes) before using an accordion, consider whether the benefits outweigh the negative usability impacts: hiding content makes it harder for a user to scan a webpage. If content is hidden inside an accordion, it can be difficult for a user to scan a whole web page for content relevant to them. Web browsers' 'Find on page…' search functions do not detect content hidden by accordions, making it harder for users to use their existing tools and behaviours to locate text. accordions increase cognitive load. Forcing a user to click on an individual accordion element to receive the full text can fragment their user experience, causing them to switch focus between accordions in order to gather all the information. It is also possible that with hidden content, a user might ignore, or not see important information. Dos use labels that are representative of the content inside the (initially hidden) container order logically (e.g. 1st quarter, 2nd quarter, 3rd quarter, 4th quarter) use only if needed in order to reduce vertical space Don'ts don't use unless users will benefit from easy-to-scan, truncated information don't use actionable items (i.e. forms, accordions, buttons, CTAs, etc.) or pictures in the content container as they will decrease visibility don't use when there are fewer than 3 pieces of information don't hide important information that should be present at all times don't use long labels, ideally keep it to one line, maximum 2 don't have over 7 lines of text in the content container
