Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
Details
Overview
Use the details component to make a page easier to read by condensing information that is only needed by some users.
{% 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
Name
Type
Required
Description
id
string
true
HTML id attribute for the details
classes
string
false
Classes to add to the details outer element
title
string
true
The title text for the details heading
headingLevel
int
false
Number 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
content
string
true
HTML content for the details
saveState
boolean
false
Saves the opened state of the details to local storage so it remains open when the page reloads
open
boolean
false
Forces the details to be open when the page loads
attributes
object
false
HTML attributes (for example, data attributes) to add to the details
headingAttributes
object
false
HTML attributes (for example, data attributes) to add to the details header element
contentAttributes
object
false
HTML 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)
{% 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
Name
Type
Required
Description
id
string
true
HTML id attribute for the details
classes
string
false
Classes to add to the details outer element
title
string
true
The title text for the details heading
headingLevel
int
false
Number 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
content
string
true
HTML content for the details
saveState
boolean
false
Saves the opened state of the details to local storage so it remains open when the page reloads
open
boolean
false
Forces the details to be open when the page loads
attributes
object
false
HTML attributes (for example, data attributes) to add to the details
headingAttributes
object
false
HTML attributes (for example, data attributes) to add to the details header element
contentAttributes
object
false
HTML 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:
{% 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
Name
Type
Required
Description
id
string
true
HTML id attribute for the details
classes
string
false
Classes to add to the details outer element
title
string
true
The title text for the details heading
headingLevel
int
false
Number 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
content
string
true
HTML content for the details
saveState
boolean
false
Saves the opened state of the details to local storage so it remains open when the page reloads
open
boolean
false
Forces the details to be open when the page loads
attributes
object
false
HTML attributes (for example, data attributes) to add to the details
headingAttributes
object
false
HTML attributes (for example, data attributes) to add to the details header element
contentAttributes
object
false
HTML 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.
{% 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
Name
Type
Required
Description
title
string
true
Title for the details panel
headingLevel
int
false
Number 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