Accordion
Accordions let users show or hide sections of related content on the same page.
<div id="accordion" class="ons-accordion">
<button type="button" class="ons-btn ons-js-collapsible-all ons-u-mb-s ons-u-d-no ons-btn--secondary ons-btn--small" data-close-all="Hide all" data-group="accordion">
<span class="ons-btn__inner ons-js-collapsible-all-inner">Show all</span>
</button>
<div id="accordion-1" class="ons-collapsible ons-js-collapsible ons-collapsible--accordion" data-btn-close="Hide" data-group="accordion">
<div class="ons-collapsible__heading ons-js-collapsible-heading">
<div class="ons-collapsible__controls">
<h2 class="ons-collapsible__title">Total retail turnover</h2>
<span class="ons-collapsible__icon">
<svg class="ons-svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<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>
<button type="button" class="ons-btn ons-collapsible__btn ons-js-collapsible-button ons-u-d-no ons-u-d-no@xxs@s ons-btn--secondary ons-btn--small">
<span class="ons-btn__inner ons-js-collapsible-button-inner">Show</span>
</button>
</div>
</div>
<div id="accordion-1-content" class="ons-collapsible__content ons-js-collapsible-content">
<h3 class="ons-u-fs-r">Include:</h3>
<ul class="ons-list">
<li class="ons-list__item">VAT</li>
<li class="ons-list__item">internet sales</li>
<li class="ons-list__item">retail sales from outlets in Great Britain to <a href="#">customers abroad</a></li>
</ul>
<h3 class="ons-u-fs-r">Exclude:</h3>
<ul class="ons-list">
<li class="ons-list__item">revenue from mobile phone network commission and top-up</li>
<li class="ons-list__item">sales from catering facilities used by customers</li>
<li class="ons-list__item">lottery sales and commission from lottery sales</li>
<li class="ons-list__item">sales of car accessories and motor vehicles</li>
<li class="ons-list__item">NHS receipts</li>
<li class="ons-list__item">automotive fuel</li>
</ul>
</div>
</div>
<div id="accordion-2" class="ons-collapsible ons-js-collapsible ons-collapsible--accordion" data-btn-close="Hide" data-group="accordion">
<div class="ons-collapsible__heading ons-js-collapsible-heading">
<div class="ons-collapsible__controls">
<h2 class="ons-collapsible__title">Food sales</h2>
<span class="ons-collapsible__icon">
<svg class="ons-svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<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>
<button type="button" class="ons-btn ons-collapsible__btn ons-js-collapsible-button ons-u-d-no ons-u-d-no@xxs@s ons-btn--secondary ons-btn--small">
<span class="ons-btn__inner ons-js-collapsible-button-inner">Show</span>
</button>
</div>
</div>
<div id="accordion-2-content" class="ons-collapsible__content ons-js-collapsible-content">
<h3 class="ons-u-fs-r">Include:</h3>
<ul class="ons-list">
<li class="ons-list__item">all fresh food</li>
<li class="ons-list__item">other food for human consumption (except chocolate and sugar confectionery)</li>
<li class="ons-list__item">soft drinks</li>
</ul>
<h3 class="ons-u-fs-r">Exclude:</h3>
<ul class="ons-list">
<li class="ons-list__item">sales from catering facilities used by customers</li>
</ul>
</div>
</div>
<div id="accordion-3" class="ons-collapsible ons-js-collapsible ons-collapsible--accordion" data-btn-close="Hide" data-group="accordion">
<div class="ons-collapsible__heading ons-js-collapsible-heading">
<div class="ons-collapsible__controls">
<h2 class="ons-collapsible__title">Alcohol, confectionery, soft drinks and tobacco sales</h2>
<span class="ons-collapsible__icon">
<svg class="ons-svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<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>
<button type="button" class="ons-btn ons-collapsible__btn ons-js-collapsible-button ons-u-d-no ons-u-d-no@xxs@s ons-btn--secondary ons-btn--small">
<span class="ons-btn__inner ons-js-collapsible-button-inner">Show</span>
</button>
</div>
</div>
<div id="accordion-3-content" class="ons-collapsible__content ons-js-collapsible-content">
<h3 class="ons-u-fs-r">Include:</h3>
<ul class="ons-list">
<li class="ons-list__item">chocolate and sugar confectionery</li>
<li class="ons-list__item">tobacco and smokers’ requisites</li>
</ul>
</div>
</div>
</div>{% from "components/accordion/_macro.njk" import onsAccordion %}
{{
onsAccordion({
"id": "accordion",
"allButton": {
"open": "Show all",
"close": "Hide all"
},
"itemsList": [
{
"title": "Total retail turnover",
"content": "<h3 class=\"ons-u-fs-r\">Include:</h3><ul class=\"ons-list\"><li class=\"ons-list__item\">VAT</li><li class=\"ons-list__item\">internet sales</li><li class=\"ons-list__item\">retail sales from outlets in Great Britain to <a href=\"#\">customers abroad</a></li></ul><h3 class=\"ons-u-fs-r\">Exclude:</h3><ul class=\"ons-list\"><li class=\"ons-list__item\">revenue from mobile phone network commission and top-up</li><li class=\"ons-list__item\">sales from catering facilities used by customers</li><li class=\"ons-list__item\">lottery sales and commission from lottery sales</li><li class=\"ons-list__item\">sales of car accessories and motor vehicles</li><li class=\"ons-list__item\">NHS receipts</li><li class=\"ons-list__item\">automotive fuel</li></ul>",
"button": {
"open": "Show",
"close": "Hide"
}
},
{
"title": "Food sales",
"content": "<h3 class=\"ons-u-fs-r\">Include:</h3><ul class=\"ons-list\"><li class=\"ons-list__item\">all fresh food</li><li class=\"ons-list__item\">other food for human consumption (except chocolate and sugar confectionery)</li><li class=\"ons-list__item\">soft drinks</li></ul><h3 class=\"ons-u-fs-r\">Exclude:</h3><ul class=\"ons-list\"><li class=\"ons-list__item\">sales from catering facilities used by customers</li></ul>",
"button": {
"open": "Show",
"close": "Hide"
}
},
{
"title": "Alcohol, confectionery, soft drinks and tobacco sales",
"content": "<h3 class=\"ons-u-fs-r\">Include:</h3><ul class=\"ons-list\"><li class=\"ons-list__item\">chocolate and sugar confectionery</li><li class=\"ons-list__item\">tobacco and smokers’ requisites</li></ul>",
"button": {
"open": "Show",
"close": "Hide"
}
}
]
})
}}
{% macro onsAccordion(params) %}
{% from "components/collapsible/_macro.njk" import onsCollapsible %}
<div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
{% if params.allButton is defined and params.allButton %}
{% from "components/button/_macro.njk" import onsButton %}
{% set attributes = params.allButton.attributes | default({}) %}
{% set attributes = attributes | setAttributes({
"data-close-all": params.allButton.close,
"data-group": params.id
}) %}
{{
onsButton({
"type": "button",
"text": params.allButton.open,
"classes": "ons-js-collapsible-all ons-u-mb-s ons-u-d-no",
"variants": ["secondary", "small"],
"innerClasses": "ons-js-collapsible-all-inner",
"attributes": attributes
})
}}
{% endif %}
{% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
{{
onsCollapsible({
"isAccordion": true,
"id": params.id + "-" + (loop.index | string),
"button": item.button,
"attributes": item.attributes,
"headingAttributes": item.headingAttributes,
"contentAttributes": item.contentAttributes,
"title": item.title,
"titleTag": item.titleTag,
"content": item.content,
"group": params.id,
"saveState": params.saveState,
"variants": params.variants,
"open": params.open
})
}}
{% endfor %}
</div>
{% endmacro %}
When to use this component
Use this component when you have identified a strong user need to quickly scan large sections of content, by condensing them into an overview of section headings, and show and hide those sections as needed.
Accordions can benefit repeat users who need to regularly perform the same familiar tasks quickly, where they only need a few key pieces of the content to proceed.
When not to use this component
Accordions hide content from users and are not easily noticed and understood by everyone. So they should not be used if the content inside each accordion is critical to the user being able to progress with their task.
Test your content considering the following alternatives before using accordions:
- simplify the content to reduce down the amount
- separate the content with headings
- use page contents links to enable users to quickly to navigate to sections of content
- divide the content across multiple pages
Alternative components
Accordions, tabs and collapsible all hide sections of content which a user can show or hide.
Tabs may work better for users who need to switch quickly between sections because the position of their headings remains static, whereas the accordion headings move down the page as you open others.
Consider the number of sections you need to display. Tabs display horizontally so cannot display as many sections as accordions which display vertically. Also consider the use of your service on mobile devices. Tabs only display above 640px before their content is expanded and stacked vertically under headings.
Use the collapsible component if there is only one section of content that needs to be condensed.
How to use this component
The functionality of accordions is provided by grouping collapsible components together.
The accordion uses JavaScript so when it’s turned off, the sections of content are expanded. The collapsible.js file takes care of running the open all/close all button, if one is provided.
Use clear labels
Accordions hide content so make sure your section headings are clear so the user does not need to work hard to understand which heading to choose.
Variants
Simple
Under certain conditions a simplified accordion may be appropriate. The example below shows the accordion being used in a narrow column for filtering results. The button controls have been removed to allow the accordion to fit into a smaller area.
To use this variant include the parameter 'variants': 'simple' in your implementation.
The example shown uses the parameter 'open': true which makes each accordion item open on page load.
Important information:
This variant has not yet been tested and may not meet our accessibility requirements.
<div class="ons-grid">
<div class="ons-grid__col ons-col-3@xs">
<div id="accordion" class="ons-accordion">
<div id="accordion-1" class="ons-collapsible ons-js-collapsible ons-collapsible--accordion ons-collapsible--simple" data-group="accordion" data-open="true">
<div class="ons-collapsible__heading ons-js-collapsible-heading">
<div class="ons-collapsible__controls">
<h2 class="ons-collapsible__title">Content type</h2>
<span class="ons-collapsible__icon">
<svg class="ons-svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<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 id="accordion-1-content" class="ons-collapsible__content ons-js-collapsible-content">
<fieldset class="ons-fieldset ons-u-mb-s">
<legend class="ons-fieldset__legend ons-u-vh">
Content type
</legend>
<p class="ons-checkboxes__label">Show only:</p>
<div class="ons-checkboxes__items">
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="data" class="ons-checkbox__input ons-js-checkbox " value="data">
<label class="ons-checkbox__label " for="data" id="data-label">Data (309)
</label>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="publications" class="ons-checkbox__input ons-js-checkbox ons-js-other ons-js-select-all-children" value="publications" aria-controls="publications-other-wrap" aria-haspopup="true">
<label class="ons-checkbox__label " for="publications" id="publications-label">Publications (137)
</label>
<span class="ons-checkbox__other" id="publications-other-wrap">
<fieldset class="ons-fieldset ons-js-other-fieldset">
<legend class="ons-fieldset__legend ons-u-vh ons-u-mb-xs">
Publication type
</legend>
<p class="ons-checkboxes__label"></p>
<div class="ons-checkboxes__items">
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="datasets" class="ons-checkbox__input ons-js-checkbox " value="datasets">
<label class="ons-checkbox__label " for="datasets" id="datasets-label">Datasets (100)
</label>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="timeseries" class="ons-checkbox__input ons-js-checkbox " value="timeseries">
<label class="ons-checkbox__label " for="timeseries" id="timeseries-label">Timeseries (20)
</label>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="requested" class="ons-checkbox__input ons-js-checkbox " value="requested">
<label class="ons-checkbox__label " for="requested" id="requested-label">User requested data (16)
</label>
</span>
</span>
</div>
</fieldset>
</span>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="areas" class="ons-checkbox__input ons-js-checkbox ons-js-other ons-js-select-all-children" value="areas">
<label class="ons-checkbox__label " for="areas" id="areas-label">Areas (0)
</label>
</span>
</span>
</div>
</fieldset>
</div>
</div>
<div id="accordion-2" class="ons-collapsible ons-js-collapsible ons-collapsible--accordion ons-collapsible--simple" data-group="accordion" data-open="true">
<div class="ons-collapsible__heading ons-js-collapsible-heading">
<div class="ons-collapsible__controls">
<h2 class="ons-collapsible__title">Topic</h2>
<span class="ons-collapsible__icon">
<svg class="ons-svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
<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 id="accordion-2-content" class="ons-collapsible__content ons-js-collapsible-content">
<fieldset class="ons-fieldset ons-u-mb-s">
<legend class="ons-fieldset__legend ons-u-vh">
Topic
</legend>
<p class="ons-checkboxes__label">Show only:</p>
<div class="ons-checkboxes__items">
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="crime" class="ons-checkbox__input ons-js-checkbox " value="crime" checked>
<label class="ons-checkbox__label " for="crime" id="crime-label">Crime (200)
</label>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="education" class="ons-checkbox__input ons-js-checkbox " value="education">
<label class="ons-checkbox__label " for="education" id="education-label">Education (55)
</label>
</span>
</span>
<br>
<span class="ons-checkboxes__item ons-checkboxes__item--no-border">
<span class="ons-checkbox ons-checkbox--no-border">
<input type="checkbox" id="disability" class="ons-checkbox__input ons-js-checkbox " value="disability">
<label class="ons-checkbox__label " for="disability" id="disability-label">Disability (67)
</label>
</span>
</span>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>{% from "components/accordion/_macro.njk" import onsAccordion %}
{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
{% set content1 %}
{{
onsCheckboxes({
"checkboxesLabel": "Show only:",
"legend": "Content type",
"legendClasses": "ons-u-vh",
"classes": "ons-u-mb-s",
"borderless": true,
"name": "dietary",
"checkboxes": [
{
"id": "data",
"label": {
"text": "Data (309)"
},
"value": "data"
},
{
"id": "publications",
"label": {
"text": "Publications (137)"
},
"value": "publications",
"other": {
"otherType": "checkboxes",
"selectAllChildren": true,
"legend": "Publication type",
"legendClasses": "ons-u-vh",
"name": "name",
"checkboxes": [
{
"id": "datasets",
"label": {
"text": "Datasets (100)"
},
"value": "datasets"
},
{
"id": "timeseries",
"label": {
"text": "Timeseries (20)"
},
"value": "timeseries"
},
{
"id": "requested",
"label": {
"text": "User requested data (16)"
},
"value": "requested"
}
]
}
},
{
"id": "areas",
"label": {
"text": "Areas (0)"
},
"value": "areas"
}
]
})
}}
{% endset %}
{% set content2 %}
{{
onsCheckboxes({
"checkboxesLabel": "Show only:",
"legend": "Topic",
"legendClasses": "ons-u-vh",
"classes": "ons-u-mb-s",
"borderless": true,
"name": "dietary",
"checkboxes": [
{
"id": "crime",
"label": {
"text": "Crime (200)"
},
"value": "crime",
"checked": true
},
{
"id": "education",
"label": {
"text": "Education (55)"
},
"value": "education"
},
{
"id": "disability",
"label": {
"text": "Disability (67)"
},
"value": "disability"
}
]
})
}}
{% endset %}
<div class="ons-grid">
<div class="ons-grid__col ons-col-3@xs">
{{
onsAccordion({
"id": "accordion",
"variants": "simple",
"open": true,
"itemsList": [
{
"title": "Content type",
"titleTag": "h2",
"content": content1
},
{
"title": "Topic",
"titleTag": "h2",
"content": content2
}
]
})
}}
</div>
</div>
{% macro onsAccordion(params) %}
{% from "components/collapsible/_macro.njk" import onsCollapsible %}
<div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
{% if params.allButton is defined and params.allButton %}
{% from "components/button/_macro.njk" import onsButton %}
{% set attributes = params.allButton.attributes | default({}) %}
{% set attributes = attributes | setAttributes({
"data-close-all": params.allButton.close,
"data-group": params.id
}) %}
{{
onsButton({
"type": "button",
"text": params.allButton.open,
"classes": "ons-js-collapsible-all ons-u-mb-s ons-u-d-no",
"variants": ["secondary", "small"],
"innerClasses": "ons-js-collapsible-all-inner",
"attributes": attributes
})
}}
{% endif %}
{% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
{{
onsCollapsible({
"isAccordion": true,
"id": params.id + "-" + (loop.index | string),
"button": item.button,
"attributes": item.attributes,
"headingAttributes": item.headingAttributes,
"contentAttributes": item.contentAttributes,
"title": item.title,
"titleTag": item.titleTag,
"content": item.content,
"group": params.id,
"saveState": params.saveState,
"variants": params.variants,
"open": params.open
})
}}
{% endfor %}
</div>
{% endmacro %}
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss the ‘Accordion’ component on GitHub