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>

Working examples

Examples

Development

The expandable/collapsible content is dependent upon native support for the HTML5 details and summary elements or the expandable/collapsible content polyfill.

Known issues

There are no known issues at this point in time.

Version history

References