Skip to main content

Expander

Make a complex topic easier to digest by letting users reveal more detailed information only if they need it.

Code and design

Open in new window
Copy
<details class="nhsuk-details nhsuk-expander">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">
      Opening times
    </span>
  </summary>
  <div class="nhsuk-details__text">
    <table>
      <tbody>
        <tr>
          <th><strong>Day of the week</strong></th>
          <th><strong>Opening hours</strong></th>
        </tr>
        <tr>
          <th>Monday</th>
          <td>9am to 6pm</td>
        </tr>
        <tr>
          <th>Tuesday</th>
          <td>9am to 6pm</td>
        </tr>
        <tr>
          <th>Wednesday</th>
          <td>9am to 6pm</td>
        </tr>
        <tr>
          <th>Thursday</th>
          <td>9am to 6pm</td>
        </tr>
        <tr>
          <th>Friday</th>
          <td>9am to 6pm</td>
        </tr>
        <tr>
          <th>Saturday</th>
          <td>9am to 1pm</td>
        </tr>
        <tr>
          <th>Sunday</th>
          <td>Closed</td>
        </tr>
      </tbody>
    </table>
  </div>
</details>
Copy
{% from 'details/macro.njk' import details %}

{{ details({
  "classes": "nhsuk-expander",
  "text": "Opening times",
  "HTML": "
  <table>
    <tbody>
      <tr>
        <th><strong>Day of the week</strong></th>
        <th><strong>Opening hours</strong></th>
      </tr>
      <tr>
        <th>Monday</th>
        <td>9am to 6pm</td>
      </tr>
      <tr>
        <th>Tuesday</th>
        <td>9am to 6pm</td>
      </tr>
      <tr>
        <th>Wednesday</th>
        <td>9am to 6pm</td>
      </tr>
      <tr>
        <th>Thursday</th>
        <td>9am to 6pm</td>
      </tr>
      <tr>
        <th>Friday</th>
        <td>9am to 6pm</td>
      </tr>
      <tr>
        <th>Saturday</th>
        <td>9am to 1pm</td>
      </tr>
      <tr>
        <th>Sunday</th>
        <td>Closed</td>
      </tr>
    </tbody>
  </table>"
}) }}

When to use expanders

Expanders stand out more than the details component. They sit in a white box and use a + and - icon to show open and closed.

We use them when users may get overwhelmed reading about life-changing health conditions such as diabetes. Expanders help break down complex information into bite size pieces which the user can "expand" at their own pace, when they're ready to do so.

Information in an expander is intended for a wide audience. Often it's the sort of information we wouldn't usually hide but if users feel overwhelmed by the amount of information on the page, an expander breaks it down which helps meet their emotional needs.

When not to use an expander

Do not use an expander if only some users will need the information. Use details instead.

As expanders are quite prominent, they don't work well on pages with other interactive elements - such as buttons or text input. There's a risk that they will distract users.

We don't put expanders in other components like care cards for the same reason.

How expanders work

The expander is a short link in a box that expands into more detailed text when a user clicks on it.

More than 1 expander

It can work well to have several expanders. See the example below.

Open in new window
Copy
<div class="nhsuk-expander-group">
  <details class="nhsuk-details nhsuk-expander">
    <summary class="nhsuk-details__summary">
      <span class="nhsuk-details__summary-text">
        How to measure your blood glucose levels
      </span>
    </summary>
    <div class="nhsuk-details__text">
      <p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
      <p>You would have been given:</p>
      <ul>
        <li>a blood glucose metre</li>
        <li>small needles called lancets</li>
        <li>a plastic pen to hold the lancets</li>
        <li>small test strips</li>
      </ul>

    </div>
  </details>

  <details class="nhsuk-details nhsuk-expander">
    <summary class="nhsuk-details__summary">
      <span class="nhsuk-details__summary-text">
        When to check your blood glucose level
      </span>
    </summary>
    <div class="nhsuk-details__text">
      <p>Try to check your blood:</p>
      <ul>
        <li>before meals</li>
        <li>2 to 3 hours after meals</li>
        <li>before, during (take a break) and after exercise</li>
      </ul>
      <p>This helps you understand your blood glucose levels and how they’re affected by meals and exercise. It should help you have more stable blood glucose levels.</p>

    </div>
  </details>

</div>
Copy
{% from 'details/macro.njk' import details %}

<div class="nhsuk-expander-group">
  {{ details({
    "classes": "nhsuk-expander",
    "text": "How to measure your blood glucose levels",
    "HTML": "
    <p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
    <p>You would have been given:</p>
    <ul>
      <li>a blood glucose metre</li>
      <li>small needles called lancets</li>
      <li>a plastic pen to hold the lancets</li>
      <li>small test strips</li>
    </ul>
    "
  }) }}
  {{ details({
    "classes": "nhsuk-expander",
    "text": "When to check your blood glucose level",
    "HTML": "
    <p>Try to check your blood:</p>
    <ul>
      <li>before meals</li>
      <li>2 to 3 hours after meals</li>
      <li>before, during (take a break) and after exercise</li>
    </ul>
    <p>This helps you understand your blood glucose levels and how they’re affected by meals and exercise. It should help you have more stable blood glucose levels.</p>
    "
  }) }}
</div>

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

Research

We tested several expanders in our information about type 1 diabetes where users felt overwhelmed by the amount of information. They tested well. We've also tested them on other pages about health and medicines.

If you’ve used this component, get in touch to share your user research findings.

Discuss

Discuss expanders on GitHub

Get in touch

If you have a question:

Updated: February 2019

Similar components