Expand Collapse All Details (v3.1 Alpha) - nschonni/wet-boew GitHub Wiki

français

This component creates buttons that expand and collapse all details elements on a page. It can also automatically expand details elements for page printing.

Table of Contents Overview Benefits Recommended usage Implementation Configuration Options Examples Single Toggle Button Multiple Toggle Buttons Working Examples Development Known Issues Version History

Project lead: Pat Heard (@patheard)

• 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

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

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

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

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

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

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

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

• English

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

• js/workers/toggledetails.js - contains the JavaScript code for toggle details
• js/sass/includes/_toggledetails.scss - contains the CSS for toggle details

• None at this time

• toggledetails.js
• _toggledetails.scss