@ec-europa/ecl-accordions v0.6.0

Accordions

Why 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.

The accordion component is a list of headers that can be clicked to hide or reveal additional content. It is also possible to add an icon to the headers.

When to use this component

• when you have a large amount of information
• on FAQ pages

Do not use this component

• as a rule avoid hiding information as much as possible

Resources

• WAI-ARIA Authoring Practices

  • Latest Version (14 December 2016)

    • https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/#accordion
    • https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/accordion/accordion1.html

  • Current draft (as seen on 21 June 2017)

    • https://w3c.github.io/aria-practices/#accordion
    • https://w3c.github.io/aria-practices/examples/accordion/accordion.html

• Existing libraries

  • https://frend.co/components/accordion/