Expander 1.2

Changelog

Basic functionality

These expandable sections use the aria-expanded attribute to control whether or not their content is visible. Their triggers are bound with accessible activation events using activate.

If the page is loaded with a hash, or an anchor link is clicked, and the page's hash aligns with the id attribute of either an expander or the descendent of an expander, that section and any expanders wrapping it will be expanded when the page is loaded. To see an example of this, load this page with #expander-demo. or #expander-demo-nested

This is expander A. It has a nested expander:

This is the content of the nested expander.

This is expander B.

Accessibility

Expander triggers should be tabbable, either due to the type of element used for them or by having tabindex="0". If an element other than <button> is used for them, it should typically have role="button" added to it.

Where a trigger controls an expander that is not its ancestor, it should use the aria-controls attribute to create a link.

For more information, see the WAI-ARIA Authoring Practices page's "disclosure" section.

No JavaScript support

When the page loads, the expanders are all closed via JavaScript. This ensures they will be open if the page is loaded without JavaScript. They are also forced to be open when printing a page.