Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

Details

Overview

Use the details component to make a page easier to read by condensing information that is only needed by some users.

Example Details contents

Nunjucks

{% from "components/details/_macro.njk" import onsDetails %}

{{
    onsDetails({
        "id": "details-example",
        "title": "What is a photovoltaic system?",
        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>"
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
idstringtrueHTML id attribute for the details
classesstringfalseClasses to add to the details outer element
titlestringtrueThe title text for the details heading
headingLevelintfalseNumber used to determine the heading level of the title text. Use to ensure the title has a correct semantic order on the page. Defaults to 2
contentstringtrueHTML content for the details
saveStatebooleanfalseSaves the opened state of the details to local storage so it remains open when the page reloads
openbooleanfalseForces the details to be open when the page loads
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details
headingAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details header element
contentAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details content element

HTML

<div id="details-example" class="ons-details ons-js-details">
  <div class="ons-details__heading ons-js-details-heading" role="button">
    <h2 class="ons-details__title ons-u-fs-r--b">What is a photovoltaic system?</h2>
    <span class="ons-details__icon">
      <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor"
        role="img" aria-hidden="true">
        <path
          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
          transform="translate(-5.02 -1.59)" />
      </svg></span>
  </div>
  <div id="details-example-content" class="ons-details__content ons-js-details-content">
    <p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate
      electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed,
      or use a solar tracker to follow the sun across the sky.</p>
  </div>
</div>

When to use this component

The details component can be used to condense a single block of content into a selectable heading, allowing the user to reveal it if they need it.

Good uses of the component are:

  • to reveal additional help at the point where a user may need it, for example, to help answer a question
  • to reveal information only needed by a first-time user
  • to show the definition of a term that may not be well understood

When not to use this component

Do not use the details component to hide information that most of your users will need to progress with their task.

If you need to use more than one details component together on a page, use an accordion.

If users need to be able to quickly switch between blocks of closely related content, use tabs.

How to use this component

The details component uses JavaScript to toggle content visibility. When JavaScript is turned off, the content will be expanded and displayed as a standard heading and block of content.

Use an appropriate heading tag (e.g. h2, h3, etc.) for the titleTag to maintain correct semantic hierarchy in the page structure. If no titleTag is provided, the default is h2.

Because this component hides content, it is important to use a clear and informative heading so that users can easily decide whether they need to expand it.

Google analytics

This component automatically includes the attribute data-ga-action="Open/Close panel" to support basic Google Analytics tracking. There is no need to add this manually.

If you want to track more detailed interactions, you can include the following additional attributes:

  • data-ga="click"
  • data-ga-category="definition"
  • data-ga-label="{TITLE}" (replace {TITLE} with a clear, descriptive label)

For more information, see our guidance on customising your Google Analytics tracking (opens in a new tab) .

Variants

There are multiple variants of this component. 

Details component with save state enabled

Use this when you need to include a link or call to action within a details component that does not open in a new window.

This will make sure that the component remains expanded if the user returns to the page using the back button in their browser.

Example Details With Saved State contents

Nunjucks
{% from "components/details/_macro.njk" import onsDetails %}

{{
    onsDetails({
        "id": "details-with-save",
        "title": "What is a photovoltaic system?",
        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>",
        "saveState": "true"
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
idstringtrueHTML id attribute for the details
classesstringfalseClasses to add to the details outer element
titlestringtrueThe title text for the details heading
headingLevelintfalseNumber used to determine the heading level of the title text. Use to ensure the title has a correct semantic order on the page. Defaults to 2
contentstringtrueHTML content for the details
saveStatebooleanfalseSaves the opened state of the details to local storage so it remains open when the page reloads
openbooleanfalseForces the details to be open when the page loads
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details
headingAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details header element
contentAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details content element
HTML
<div id="details-with-save" class="ons-details ons-js-details" data-save-state="true">
  <div class="ons-details__heading ons-js-details-heading" role="button">
    <h2 class="ons-details__title ons-u-fs-r--b">What is a photovoltaic system?</h2>
    <span class="ons-details__icon">
      <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor"
        role="img" aria-hidden="true">
        <path
          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
          transform="translate(-5.02 -1.59)" />
      </svg></span>
  </div>
  <div id="details-with-save-content" class="ons-details__content ons-js-details-content">
    <p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate
      electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed,
      or use a solar tracker to follow the sun across the sky.</p>
  </div>
</div>

Nesting other components in a details component

You can use other components inside of the details component.

An example of this is the details component with a warning panel:

Example Details With Warning contents

Nunjucks
{% from "components/details/_macro.njk" import onsDetails %}
{% from "components/panel/_macro.njk" import onsPanel %}

{%
    call onsDetails({
        "id": "details-example-with-warning",
        "title": "Need to answer separately from your household?"
    })
%}
    <p>
        If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start
        a separate survey.
    </p>
    {%
        call onsPanel({
            "variant": "warn"
        })
    %}
        Someone in your household must still complete a survey using a household access code
    {% endcall %}
{% endcall %}
Nunjucks macro options
NameTypeRequiredDescription
idstringtrueHTML id attribute for the details
classesstringfalseClasses to add to the details outer element
titlestringtrueThe title text for the details heading
headingLevelintfalseNumber used to determine the heading level of the title text. Use to ensure the title has a correct semantic order on the page. Defaults to 2
contentstringtrueHTML content for the details
saveStatebooleanfalseSaves the opened state of the details to local storage so it remains open when the page reloads
openbooleanfalseForces the details to be open when the page loads
attributesobjectfalseHTML attributes (for example, data attributes) to add to the details
headingAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details header element
contentAttributesobjectfalseHTML attributes (for example, data attributes) to add to the details content element
HTML
<div id="details-example-with-warning" class="ons-details ons-js-details">
  <div class="ons-details__heading ons-js-details-heading" role="button">
    <h2 class="ons-details__title ons-u-fs-r--b">Need to answer separately from your household?</h2>
    <span class="ons-details__icon">
      <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor"
        role="img" aria-hidden="true">
        <path
          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
          transform="translate(-5.02 -1.59)" />
      </svg></span>
  </div>
  <div id="details-example-with-warning-content" class="ons-details__content ons-js-details-content">
    <p> If you need to answer separately from the people you live with, you can <a href="#0">request an individual
        access code</a> to start a separate survey. </p>
    <div class="ons-panel ons-panel--warn ons-panel--no-title">
      <span class="ons-panel__icon" aria-hidden="true">!</span>
      <span class="ons-panel__assistive-text ons-u-vh">Warning: </span>
      <div class="ons-panel__body"> Someone in your household must still complete a survey using a household access code
      </div>
    </div>
  </div>
</div>
Warning:

Do not use this for content that is important to every user

Only use a warning panel inside of a details component to warn users about something that it is only relevant to those that have opened the details component.

Details panel

The details panel should be displayed in its expanded (open) state by default. This ensure important information is immediately visible. 

The component includes optional sections for corrections and notices which can be  enable or disabled as needed.

Example Details Panel Open contents

Nunjucks

{% from "components/details-panel/_macro.njk" import onsDetailsPanel %}

{{
    onsDetailsPanel({
        "open": true,
        "title": "Correction and Notice",
        "detailsItems": [
            {
                "text": 'Correction',
                "date": {
                    "iso": '2025-01-22T16:30Z',
                    "short": '22nd January 2025, 4:30PM'
                },
                "description": '<p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A weighting error means these data have now been revised, with the overall impact being minimal.</p>
                <p>ONS apologises for any inconvenience caused.</p>',
                "url": '#0'
            },
            {
                "text": 'Notice',
                "date": {
                    "iso": '2025-01-22T16:30Z',
                    "short": '22nd January 2025, 4:30PM'
                },
                "description": '<p>To improve the timeliness of our publications, we have discontinued the previously published <a href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>.
                We will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>'
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
titlestringtrueTitle for the details panel
headingLevelintfalseNumber used to determine the heading level of the title text. Use to ensure the title has a correct semantic order on the page. Defaults to 2
DetailsItemsarray<DetailsItem>trueSettings for the array of Details Items
openTextstringfalseOptional alternative for the 'Show detail' toggle text
closeTextstringfalseOptional alternative for the 'Hide detail' toggle text
openbooleanfalseForces the details panel to be open when the page loads
DetailsItem
NameTypeRequiredDescription
textstringtrueName of the item
dateObject<Date>trueAn object for Date set for the item
descriptionstringtrueDescription for the item
urlstringfalse (unless text is set to Correction)Link URL to view superseded version
urlTextstringfalseOptional alternative link text
Date
NameTypeRequiredDescription
isostringtrueISO format machine-readable date, for example, 2020-05-20
shortstringtrueDisplayed short format of the date, for example, “20 May 2020”

HTML

<details class="ons-details-panel" data-open>
  <summary class="ons-details-panel__banner ons-u-pt-s ons-u-pb-s">
    <div class="ons-container ons-details-panel__banner-contents">
      <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
      <div class="ons-details-panel__banner-body">
        <h2 class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">Correction and Notice</h2>
        <div class="ons-details-panel__banner-detail">
          <span class="ons-details-panel__banner-detail-title ons-u-mr-3xs">
            <span class="ons-details-panel__banner-detail-title--open"> Show detail </span>
            <span class="ons-details-panel__banner-detail-title--close"> Hide detail </span>
          </span>
          <span class="ons-details-panel__banner-detail-icon">
            <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
              fill="currentColor" role="img" aria-hidden="true">
              <path
                d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                transform="translate(-5.02 -1.59)" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </summary>
  <div class="ons-container ons-details-panel__content ons-u-pt-xl ons-u-pb-3xl">
    <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
      <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
        <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">Correction</h3>
        <time class="ons-details-panel__content-date" datetime="2025-01-22T16:30Z">22nd January 2025, 4:30PM</time>
      </div>
      <div class="ons-details-panel__content-description">
        <div class="ons-details-panel__content-text ons-u-mb-s">
          <p>The Non-Financial Business Economy publication uses estimates from the Annual Business Survey (ABS). A
            weighting error means these data have now been revised, with the overall impact being minimal.</p>
          <p>ONS apologises for any inconvenience caused.</p>
        </div>
        <a class="ons-details-panel__content-url" href="#0"> View superseded version </a>
      </div>
    </div>
    <div class="ons-details-panel__item ons-u-pb-xl ons-u-mb-l ons-u-ml-2xs">
      <div class="ons-details-panel__content-meta ons-u-mb-l@2xs@m">
        <h3 class="ons-details-panel__content-heading ons-u-fs-r--b ons-u-mb-no">Notice</h3>
        <time class="ons-details-panel__content-date" datetime="2025-01-22T16:30Z">22nd January 2025, 4:30PM</time>
      </div>
      <div class="ons-details-panel__content-description">
        <div class="ons-details-panel__content-text ons-u-mb-s">
          <p>To improve the timeliness of our publications, we have discontinued the previously published <a
              href="#0">Non-financial business economy<a>, <a href="#0">UK and regional (Annual Business Survey)</a>. We
                will now deliver the UK and regional elements separately, in our <a href="#0">Non-financial business
                  economy</a>, <a href="#0">UK (Annual Business Survey)</a> and <a href="#0">Non-financial business
                  economy</a>, <a href="#0">regional (Annual Business Survey) bulletins</a>.</p>
        </div>
      </div>
    </div>
  </div>
</details>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Collapsible’ component on GitHub (opens in a new tab)