Mozilla Protocol
  • 19.1.0

Details

The <details> element was introduced in HTML5 to provide a native collapsible “accordion” widget that previously required JavaScript. However, older browsers don’t support the newer elements, so Protocol includes a JavaScript polyfill to improve backwards compatibility.

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>