Fully annotated script is available in the demo source or take a look at the Codepen.
Most of the hidden sections on this site are either lists of links or technical content code blocks and make use of the technique described here.
Note this is not strictly an accordion (one drawer open at a time), though modification should be possible.
In version 7 class names are depricated in favour of ARIA attributes wherever possible. Which enforces correct usage.
The actual tags used are strongly recommended for the semantic value, but are not enforced. You may freely change any of them. For example; the container to a div, the heading to a paragraph, the div to an unordered list. For the sake of simplicity we'll refer to them as container, heading, and block.
The script builds on the core markup retaining the key semantic structure.
The JavaScipt changes the heading behavior to that of an activating button.
ARIA roles are added to notify AT of the expected behavior change, and an SVG icon is added as a visual clue.
Adding aria-expanded="true" to the heading will force the hidden section to be open by default.
Once initialised the script changes the states of the ARIA attributes which are actioned by CSS. No class names were hurt in the making of this module.
The code is agnostic to what HTML elements are used but they must be in the set order: container > heading + block.
The heading becomes the toggle button.
The container has CSS added / removed on interactions. Used to highlight the whole container when the heading (button) is hovered or focused.
The animated SVG plus / minus icon
The aria-hidden attribute controls the "hidden" block animation.
Caveat: Avoid vertical margins, or padding, applied directly to the block.
Hardware acceleration for the transitions, not needed but never hurts.
Google closure compiled
v7.0 - 1.26KB gzipped (3.19KB uncompressed).
Still to do
Change from using on-click to on-touch-end to improve responsiveness on touch devices.
Work this version back into the site content. Though I believe this is the point where NPM comes in. Time to upscale production techniques…