wfAccordion is a tiny script for enhancement of predefined markup with accessible and keyboard-enabled accordion functionality. It closely follows the best practices laid out in WAI-ARIA Authoring Practices 1.2 for Accordions.
Accordions are a common design pattern in web design. They are often used to hide large chunks of content from the user intially. The aim is to provide a general overview of the content to the user, so that he can decide which part of it is interesting to him and can expand the content via interaction.
Add "data-wf-accordion-expanded" to the accordion's root element to expand its panel initially.
Add "data-wf-accordion-disabled" to the accordion's root element to disable it.
strong or span)
You can use nested elements inside the element with .js-accordion__trigger.
To result in valid HTML, the final DOM needs to avoid nesting block-level elements in buttons.
The id-attribute on the accordion's root element is mandatory. It is used to generate header and panel relationships which are essential for expanding of panels and also helpful for assistive technologies. If the attribute is missing or empty, the script will generate a fallback ID from the header's text.
The id-attribute on the accordion's root element is mandatory. It is used to generate header and panel relationships which are essential for expanding of panels and also helpful for assistive technologies. If the attribute is missing or empty, the script will generate a fallback ID from the header's text.
The script handles duplicate header texts by adding a number to the ID on any occurrences of the same header text after the first.
The script handles duplicated header texts by adding a number to the id on any occurences of the same header text after the first.