Tout afficher/masquer

Needs translation

Overview

Project lead: Pat Heard (@patheard)

Benefits

  • Single click to expand and collapse all details elements on a page.
  • Automatically expand details elements for printing.
  • Conforms to WCAG 2.0 AA
  • Uses WAI-ARIA to enhance accessibility
  • Progressive enhancement approach

Recommended usage

  • Pages with multiple details elements.
  • Pages that require their details elements expanded for printing.

Implementation

  1. Add the wet-boew-expandcollapseall class to the tag that will hold the button(s).
  2. Specify the configuration options using CSS classes.

Configuration Options

CSS Class Details
accent-first Accents the first button
print-open Automatically expand details when printing
toggle Add a button that expands and collapses details elements
toggle-close Add a button that will only collapse details elements
toggle-open Add a button that will only expand details elements

Examples

Single Button

Creates a single toggle button that alternates between expanding and collapsing the details elements on the page:

<div class="wet-boew-expandcollapseall"></div>

Multiple Buttons

Creates multiple buttons (toggle, expand and collapse), visually accents the first button and expands all details elements when the page is printed:

<div class="wet-boew-expandcollapseall toggle toggle-open toggle-close accent-first print-open"></div>

Working Examples

Development

The code for toggle details is located in several places within the source folder of WET:

Known Issues

None at this time.

Version History