Accordion (Single Item)

This accessible accordion is built with the details element:

<details>
    <summary>
      Title
    </summary>
    <p>
      Content...
    </p>
</details>

Notes

• To enable multiple accordions, add the data-group attribute, e.g. data-group="accordion". When any <details> in a group opens, any others in the same group automatically close.
• Hardcode open on any details element to have that accordion open on page load, i.e. <details open>.
• Accordions can be nested.