Details

A link-like summary that opens a short explanation. For help only some people need, kept out of the way of everyone else.

When to use

Next to a question, for the people who are not sure what it means or where to find the answer.

When not to use

To hide something most people need. If most people would open it, put the text on the page. For several related sections, use the accordion.

Where to find your ID number

It is printed on the front of your national ID card. If you have lost it, the registration office can look it up from your name and date of birth.

Show HTML

<details class="ag-details ag-mb-0">
  <summary class="ag-details__summary">Where to find your <span data-docs-string="id-short">ID number</span></summary>
  <div class="ag-details__body">
    <p>
      It is printed on the front of your <span data-docs-string="id-document">national ID card</span>. If you have
      lost it, <span data-docs-string="id-authority">the registration office</span> can look it up from your name and
      date of birth.
    </p>
  </div>
</details>

Accessibility

Native details: Enter and Space toggle it, and the open state is announced.
The summary reads like a link because it behaves like one, and starts with a verb or a question.
Do not put a form control inside. Validation errors inside a closed details are easy to miss.