- Skip to main content
- Skip to "About this site"

# Details/summary polyfill (expandable/collapsible content)

- Documentation
- Questions or comments?

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:
  2014-07-21