Mozilla Protocol
  • 22.0.0

Details

The <details> element was introduced in HTML5 to provide a native collapsible “accordion” widget that previously required JavaScript. It’s natively supported across Protocol’s supported browsers, so no polyfill is needed. If you need more control over the open/close behavior than the native element provides, use the JS-driven Protocol Details component instead.

The <details> element requires a <summary>. Use <details> only for content that has no headings, and keep the summary to plain text: <summary> has no ARIA role of its own and some screen readers expose it as a button, so a heading placed inside it is left out of heading navigation. For collapsible content that is organized by headings, use the Details component instead, which turns each heading into an expand/collapse control while keeping the heading element in place.

Note: though they’re visually similar, this native HTML element is distinct from the Protocol Details component.

<details>
  <summary class="mzp-u-heading-xs">Summary One</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan
    neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at
    justo.</p>
</details>

<details>
  <summary class="mzp-u-heading-xs">Summary Two</summary>
  <p>Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu
    erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget
    vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros
    eget malesuada vulputate.</p>
  <p>Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat.
    Nullam facilisis odio non ante varius tempor ut ac turpis.</p>
</details>