Details/summary polyfill (expandable/collapsible content)
Looking for WET v3.1?
As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.
The HTML5 details
and summary
elements are used to provide expandable/collapsible content. This component adds support for these elements in browsers that do not already have native support.
Examples
-
Example 1
Example content that provides more details.
Cups of coffee consumed by each delegate Name Cups Type of Coffee Sugar? T. Sexton 10 Espresso No J. Dinnen 5 Decaf Yes -
Example 2
Example content that provides more details.
Cups of coffee consumed by each delegate Name Cups Type of Coffee Sugar? T. Sexton 10 Espresso No J. Dinnen 5 Decaf Yes -
Example 3
Example content that provides more details.
Cups of coffee consumed by each delegate Name Cups Type of Coffee Sugar? T. Sexton 10 Espresso No J. Dinnen 5 Decaf Yes
Code
<ul class="list-unstyled">
<li>
<details>
<summary>Example 1</summary>
...
</details>
</li>
<li>
<details open="open">
<summary>Example 2</summary>
...
</details>
</li>
...
</ul>
- Date modified: