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" title="ons-icon-chevron">
<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 this component works
This component contains the data-ga-action="Open/Close panel" attribute, so you will not need to add this for Google Analytics tracking.
How to use this component
The details component uses JavaScript so when it is turned off, the content is expanded and displayed as a standard heading and block of content.
Use an appropriate heading tag (h2, h3 etc) for the titleTag to provide the correct semantic hierarchy to the document with the rest of the page. The default is H2 if titleTag is not provided.
Use a clear label
The details component hides content so make sure your heading is clear so the user doesn’t need to work hard to understand if they need to expand it.
Google analytics
If you would like to track more detailed information about interactions with this component, use these attributes:
{% 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" title="ons-icon-chevron">
<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" title="ons-icon-chevron">
<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.