Accessibly show & hide blocks of content.
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 an accordion (one drawer open at a time), though modification should be possible.
Mark a container with
class="pab" as a hook for the script to find.
The container must contain both a heading and a container marked
The script builds on the core markup retaining the key semantic structure.
Replacing the heading content with an activating button.
SVG icon and ARIA roles are also added.
Once initialised the script changes the states of the HTML attributes to be picked up by CSS.
Hardware acceleration, not needed but never hurts.
The containing block
The activation button.
The SVG animated plus/minus icon.
The clicked spot animation.
The hidden content container.
The only thing to avoid is vertical margin, or padding, applied directly to the hidden container.
Google closure compiled
v5.5a - 1.35KB gzipped (3.5KB uncompressed).
Fully annotated script is available in the demo source.
Still to do
Change from using on-click to on-touch-end to improve responsiveness on touch devices.