Details/summary polyfill (expandable/collapsible content)
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 -
Example 4 - multi-line summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.
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: