Expand/Collapse: Examples
Soome of these may be old, and there are better options. Please check with Shawn before using.
- Common expand-collapse
- For additional information about a field: Show Info [+] / Hide Info [-]
- Example: Generate an Accessibility Statement
- Note: top right has Show all additional information [+] / Hide all additional information [-]
- For full SC text: Show full description [+] / Show full description [1] {@@ probably should change to Hide
- For links to information on another page: (!) Understanding 1.1
- Related pattern that I’m not sure we want to use because it seems like it would show info on this page, but it goes to another page. (i) after “Add data from other (automated) tests” in WCAG-EM Report To, Step 4: Audit the Selected Sample
- Exampes of showing and hiding sections:
- WAI home page, top right: Hide Section [1] / Show information about W3C, WAI, You [+]
- Introduction to Web Accessibility top right: Hide Options [-] / [translation icon] Show Customization, Languages, Translations [+]
- WCAG-EM Report To, Step 4: Audit the Selected Sample right panel: Hide > / < Show Your report
- WCAG Quick Ref
- top left under h1: > Show About & How to Use / v Hide About & How to Use
- top of left column: < Hide / > Show Sidebar