Content presentation - Expander

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

Open this default expander example in new window
Copy default expander code 
<details class="hs2-details hs2-expander">
  <summary class="hs2-details__summary">
    <span class="hs2-details__summary-text">
      Click to see details
    </span>
  </summary>
  <div class="hs2-details__text">
    <p>Here you will find further details of the selected item</p>

  </div>
</details>
Close default expander 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 expander
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 id Type string Required false Description Id to add to the details element.
Name open Type boolean Required false Description If true, details element will be expanded.
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 expander code 
{% from 'details/macro.njk' import details %}

{{ details({
  "classes": "hs2-expander",
  "text": "Click to see details",
  "HTML": "
  <p>Here you will find further details of the selected item</p>
"
}) }}
Close default expander code

When to use expanders

There are 2 ways to let users reveal more information:

Use expanders:

  • on pages where users find the amount of information overwhelming - they break down information into bite size pieces which the user can "expand", when they're ready to do so
  • for information for a wide audience, unlike the details component
  • when you see a clear user need for them

Test your content without an expander first. It may be better to:

  • simplify and reduce the amount of content
  • split the content across multiple pages
  • keep the content on a single page, separated by headings
  • use a list of links to let users navigate quickly to specific sections of content

When not to use an expander

Do not use an expander if:

  • only some users will need the information - use details instead
  • to give users help in forms - instead, add hint text as a part of other form inputs, such as text inputs, radios and checkboxes or use details
  • on pages with other interactive elements, such as buttons or text input - there's a risk that expanders will distract users

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 this group expander example in new window
Copy group expander code 
<div class="hs2-expander-group">
  <details class="hs2-details hs2-expander">
    <summary class="hs2-details__summary">
      <span class="hs2-details__summary-text">
        Click here for more details
      </span>
    </summary>
    <div class="hs2-details__text">
      <p>Here are more details on your selected item</p>
    </div>
  </details>

  <details class="hs2-details hs2-expander">
    <summary class="hs2-details__summary">
      <span class="hs2-details__summary-text">
        Click here for details of your second item
      </span>
    </summary>
    <div class="hs2-details__text">
      <p>Here are details of the second item</p>
    </div>
  </details>

</div>
Close group expander 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 group expander
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 id Type string Required false Description Id to add to the details element.
Name open Type boolean Required false Description If true, details element will be expanded.
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 group expander code 
{% from 'details/macro.njk' import details %}

<div class="hs2-expander-group">
  {{ details({
    "classes": "hs2-expander",
    "text": "Click here for more details",
    "HTML": "
    <p>Here are more details on your selected item</p>"
  }) }}
  {{ details({
    "classes": "hs2-expander",
    "text": "Click here for details of your second item",
    "HTML": "
    <p>Here are details of the second item</p>"
  }) }}
</div>
Close group expander code

Write clear link text

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