Components

Expander

Use expanders to make content easier to digest by letting users reveal more detailed information only if they need it.

How to use

We extend the NHS design system expander with the nhsapp-expander modifier class so that its border radius, border width and padding matches the card links.

Open this example (Expander) in a new tab 
<details class="nhsuk-details nhsuk-expander nhsapp-expander">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      Learn more about this test
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <p>
      This test is used to diagnose and monitor diabetes. It measures the level
      of sugar (glucose) in your blood.
    </p>
    <p>If your result is high, your doctor may talk to you about:</p>

    <ul>
      <li>
        having another test in a few weeks or months to see if your result
        changes
      </li>
      <li>
        making lifestyle changes to lower your blood sugar level, such as
        getting more exercise and eating healthily
      </li>
      <li>
        starting treatment for diabetes (or changing your treatment if you're
        already being treated)
      </li>
    </ul>
  </div>
</details>


{% from "details/macro.njk" import details %}

{% call details({
  summaryText: "Learn more about this test",
  classes: "nhsuk-expander nhsapp-expander"
}) %}
  <p>This test is used to diagnose and monitor diabetes. It measures the level of sugar (glucose) in your blood.</p>
  <p>If your result is high, your doctor may talk to you about:</p>

  <ul>
    <li>having another test in a few weeks or months to see if your result changes </li>
    <li>making lifestyle changes to lower your blood sugar level, such as getting more exercise and eating healthily </li>
    <li>starting treatment for diabetes (or changing your treatment if you're already being treated) </li>
  </ul>
{% endcall %}

Help improve this component

The NHS App design system team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the 'Expander' discussion on GitHub.