Basic Toggle

The toggle utility uses JavaScript to show/hide and hide elements based on user interaction. This will toggle the class 'active' and 'hidden' on the toggle element and target element, determined by the click event on a button or link. This will also toggle Aria attributes present on the toggle element and the target element to support screen readers. Supported aria attributes include aria-pressed and aria-expanded on the toggle element and aria-hidden on the target element. These attributes must be present on each element with default settings when the script loads to support them.

Usage

import Toggle from '../utilities/toggle/Toggle';
new Toggle();

This uses the .matches() method which will require a polyfill for IE11 (and other older browser) support. The utility does not ship with a polyfill by default. See Element Prototype Matches on MDN for a suitable polyfill.

The basic example uses the aria-controls on the toggle element to select the id of the target element, and toggle it accordingly

Anchor Toggle

The anchor toggle uses an anchor in the href to jump to the target element.

Toggle Fade In Up

Adding hidden:fadeInUp animated to the target element will animate the opacity and position target element.

Toggle Overflow

Adding hidden:overflow animated to the target element will animate the max-height property of the target element.

Toggle Overflow Fade In Up

This is a combination of the "overflow" and "fade in up" animations. Adding hidden:overflowFadeInUp will animate the max-height property of the parent element. Adding animated to any immediate (.parent > .child) children of the parent will animate the opacity property fo the child.