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/#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
https://frend.co/components/accordion/