Expandable/collapsible content
Overview
Project lead: Alexander Canas (@canasa)
Purpose
The HTML5 details and summary elements allows content to be expanded and collapsed. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.
Rationale
Browsers that do not support the details and summary elements natively ignore the expand/collapse functionality and therefore, content is displayed in full. This polyfill ensures that content can be expanded/collapsed and the necessary information is exposed to assistive technologies by adding WAI-ARIA.
Implementation
To use the polyfill, standard details and summary elements must be used. In cases where a browser doesn't support these elements, the polyfill is automatically loaded.
Parameters
The expandable/collapsible content polyfill accepts one parameter: open. This parameter is automatically added/removed when content is expanded/collapsed.
Open parameter
This parameter represents the state of the expansion/collapse of the details element. If the open parameter is present, the content of details is expanded. If the open parameter is absent, the content of details is collapsed.
Example code
Expanded details element
<details open="open">
<summary>View source code</summary>
... Source code ...
</details>
Collapsed details element
<details>
<summary>View source code</summary>
... Source code ...
</details>
Examples
Development
The expandable/collapsible content is dependent upon native support for the HTML5 details and summary elements or the expandable/collapsible content polyfill.
- js/polyfills/detailssummary.js - contains the JavaScript code for the expandable/collapsible polyfill
- js/sass/includes/_details.scss - contains the SCSS for the expandable/collapsible polyfill
- js/sass/includes/_details-ie.scss - contains the pre-IE9 SCSS for the expandable/collapsible polyfill
Known issues
There are no known issues at this point in time.
Version history
References
- Date modified: