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>, which you can combine with headings to convey hierarchy, if appropriate.

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

<details>
    <summary>
        <h3>Summary One</h3>
    </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>
        <h3>Summary Two</h3>
    </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>
    <h4>Sub Heading</h4>
    <p>Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat.
        Nullam facilisis odio non ante varius tempor ut ac turpis.</p>
</details>