Expandables

When and how to use this component

If you need to present a lot of content on a page, it can be divided into sub-sections in a structured way.

When to use this component

• when you have a large amount of information

Do not use this component

• as a rule avoid hiding information as much as possible

Implementation

In order to automatically attach event listeners on your expandables, add the following script to your page:

document.addEventListener('DOMContentLoaded', function() {
  ECL.initExpandables();
});

Change button label when the component is collapsed/expanded

You can attach data-label-expanded and data-label-collapsed attributes to your button. The button label will be updated dynamically according to these values. Check the first example for more information.

Resources

• Using the WAI-ARIA aria-expanded state to mark expandable and collapsible regions, WCAG Working Group
• Progressive collapsibles, ARIA Examples, Heydon Pickering
• A11y Toggle, Edenspiekermann