Expandable collapsible content (details summary polyfill) - nschonni/wet-boew GitHub Wiki
Project lead: Alexander Canas (@canasa)
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.
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 ARIA.
To use the polyfill, standard details and summary elements must be used. In cases where browser don't support these elements, the polyfill is automatically loaded.
The expandable/collapsible content polyfill accepts one parameter: open. This parameter is automatically added/removed when content is expanded/collapsed.
This parameter represent 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.
<details open="open"> <summary>View source code</summary> ... Source code ... </details>
<details> <summary>View source code</summary> ... Source code ... </details>
Expandable/collapsible content is dependent upon native support for the HTML5 details and summary elements or the expandable/collapsible content polyfill.
The code for the expandable/collapsible content is located in several places within the source folder of WET:
- js/polyfills/details.js - contains the JavaScript code for the expandable/collapsible content polyfill
- js/sass/includes/_details.scss - contains the CSS for the expandable/collapsible content polyfill
- js/sass/includes/_details-ie7.scss - contains the IE7-specific CSS for the expandable/collapsible content polyfill
There are no known issues at this point in time.