forked from wet-boew/wet-boew
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand Collapse All Content
pjackson28 edited this page Sep 2, 2013
·
5 revisions
This component creates links that expand and collapse all details elements on a page. It can also automatically expand details elements for page printing.
Project lead: Pat Heard (@patheard)
- Single click to expand and collapse all
detailselements on a page. - Automatically expand
detailselements for printing. - Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Progressive enhancement approach
- Pages with multiple
detailselements. - Pages that require their
detailselements expanded for printing.
- Add the wet-boew-expandcollapseall class to the tag that will hold the button(s).
- Specify the configuration options using CSS classes.
| 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 |
Creates a single toggle button that alternates between expanding and collapsing the details elements on the page:
<div class="wet-boew-expandcollapseall"></div>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>The code for toggle details is located in several places within the source folder of WET:
- js/workers/expandcollapseall.js - contains the JavaScript code for expand/collapse all content
- js/sass/includes/_expandcollapseall.scss - contains the CSS for expand/collapse all content
- None at this time