Content presentation - Details

Use details to make a page easier to scan by letting users reveal more information if they need it.

Open this default details example in new window
Copy default details code 
<details class="hse-details">
  <summary class="hse-details__summary">
    <span class="hse-details__summary-text">
      How to find your HSE number
    </span>
  </summary>
  <div class="hse-details__text">
    <p>An HSE number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your HSE number by logging in to a GP online service or on any document the HSE has sent you, such as your:</p>
    <ul>
      <li>prescriptions</li>
      <li>test results</li>
      <li>hospital referral letters</li>
      <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your HSE number.</p>

  </div>
</details>
Close default details code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default details
Name Type Required Description
Name text Type string Required true Description Text to be displayed on the details component.
Name html Type string Required true Description HTML content to be displayed within the details component.
Name classes Type string Required false Description Classes to add to the details element.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the details element.
Copy default details code 
{% from 'details/macro.njk' import details %}

{{ details({
  "text": "How to find your HSE number",
  "HTML": "
  <p>An HSE number is a 10 digit number, like 485 777 3456.</p>
    <p>You can find your HSE number by logging in to a GP online service or on any document the HSE has sent you, such as your:</p>
    <ul>
        <li>prescriptions</li>
        <li>test results</li>
        <li>hospital referral letters</li>
        <li>appointment letters</li>
    </ul>
    <p>Ask your GP surgery for help if you can't find your HSE number.</p>
  "
}) }}
Close default details code

When to use details

There are 2 ways to let users reveal more information:

Use details to make a page easier to scan when it contains information that only some users will need.

We also use details to hide some potentially disturbing images. For example, the ‘See what different worms look like’ piece on the worms in humans page.

When not to use details

Do not use details to hide information that most users will need.

How to use details

Details is a short link that expands to show more text when a user clicks on it.

Make the link text short and descriptive so users can quickly work out if they need to click on it.

Research

Research by the NHS has shown that users understand the purpose of the component and are able to use it.

The NHS has heard users being reluctant to expand the details component in user testing sessions for transactional services (forms).

When asked why they would not click, they explained that they thought the link text would take them to a new page and they would lose their progress.

Updated: August 2023