ECL Accordions

Downloads in past


86121.8.03 years ago5 years agoMinified + gzip package size for @ecl/generic-component-accordion in KB



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


  • 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/#accordion)
* [https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/accordion/accordion1.html](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/#accordion)
* [https://w3c.github.io/aria-practices/examples/accordion/accordion.html](https://w3c.github.io/aria-practices/examples/accordion/accordion.html)
  • Existing libraries