Accordion
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-heading-1">
Section A
</span>
</h2>
</div>
<div id="accordion-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="accordion-heading-2">
Section B
</span>
</h2>
</div>
<div id="accordion-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
items: [
{
heading: {
text: "Section A"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
},
{
heading: {
text: "Section B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Accordion with additional descriptions
Open this example in a new tab: accordion with additional descriptions
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="with-descriptions">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-descriptions-heading-1">
Test
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-1">
Additional description
</div>
</div>
<div id="with-descriptions-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
<ul class="govuk-list govuk-list--bullet">
<li>Example item 1</li>
</ul>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-descriptions-heading-2">
Test 2
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-descriptions-summary-2">
<span class="govuk-!-font-weight-regular">Additional description (wrapped in span)</span>
</div>
</div>
<div id="with-descriptions-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-descriptions",
items: [
{
heading: {
text: "Test"
},
summary: {
text: "Additional description"
},
content: {
html:
'<p class="govuk-body">\n' +
" We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n" +
"</p>\n" +
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Test 2"
},
summary: {
html: '<span class="govuk-!-font-weight-regular">Additional description (wrapped in span)</span>'
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Accordion with long content and description
Open this example in a new tab: accordion with long content and description
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="with-long-content-and-description">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-long-content-and-description-heading-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-long-content-and-description-summary-1">
Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.
</div>
</div>
<div id="with-long-content-and-description-content-1" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 1</li>
</ul>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-long-content-and-description-heading-2">
Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.
</span>
</h2>
<div class="govuk-accordion__section-summary govuk-body" id="with-long-content-and-description-summary-2">
<span class="govuk-!-font-weight-regular">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>
</div>
</div>
<div id="with-long-content-and-description-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-long-content-and-description",
items: [
{
heading: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor."
},
summary: {
text: "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem."
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum."
},
summary: {
html: '<span class="govuk-!-font-weight-regular">Maecenas nec <abbr>est</abbr> sapien. Etiam varius luctus mauris non porttitor. </span>'
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Accordion with one section open
Open this example in a new tab: accordion with one section open
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="one-section-open-example">
<div class="govuk-accordion__section govuk-accordion__section--expanded">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="one-section-open-example-heading-1">
Section A
</span>
</h2>
</div>
<div id="one-section-open-example-content-1" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 1</li>
</ul>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="one-section-open-example-heading-2">
Section B
</span>
</h2>
</div>
<div id="one-section-open-example-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "one-section-open-example",
items: [
{
heading: {
text: "Section A"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Section B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Accordion with all sections already open
Open this example in a new tab: accordion with all sections already open
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="all-sections-open-example">
<div class="govuk-accordion__section govuk-accordion__section--expanded">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="all-sections-open-example-heading-1">
Section A
</span>
</h2>
</div>
<div id="all-sections-open-example-content-1" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 1</li>
</ul>
</div>
</div>
<div class="govuk-accordion__section govuk-accordion__section--expanded">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="all-sections-open-example-heading-2">
Section B
</span>
</h2>
</div>
<div id="all-sections-open-example-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "all-sections-open-example",
items: [
{
heading: {
text: "Section A"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 1</li>\n" +
"</ul>\n"
}
},
{
heading: {
text: "Section B"
},
expanded: true,
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}Accordion with focusable elements inside
Open this example in a new tab: accordion with focusable elements inside
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="with-focusable-elements">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-focusable-elements-heading-1">
Section A
</span>
</h2>
</div>
<div id="with-focusable-elements-content-1" class="govuk-accordion__section-content">
<a class="govuk-link" href="#">Link A</a>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-focusable-elements-heading-2">
Section B
</span>
</h2>
</div>
<div id="with-focusable-elements-content-2" class="govuk-accordion__section-content">
<a class="govuk-link" href="#">Link B</a>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-focusable-elements",
items: [
{
heading: {
text: "Section A"
},
content: {
html: '<a class="govuk-link" href="#">Link A</a>'
}
},
{
heading: {
text: "Section B"
},
content: {
html: '<a class="govuk-link" href="#">Link B</a>'
}
}
]
}) }}Accordion with translations
Code
Markup
<div class="govuk-accordion" data-module="govuk-accordion" id="with-translations" data-i18n.hide-all-sections="Collapse all sections" data-i18n.hide-section="Collapse" data-i18n.hide-section-aria-label="Collapse this section" data-i18n.show-all-sections="Expand all sections" data-i18n.show-section="Expand" data-i18n.show-section-aria-label="Expand this section">
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-translations-heading-1">
Section A
</span>
</h2>
</div>
<div id="with-translations-content-1" class="govuk-accordion__section-content">
<p class="govuk-body">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>
</div>
<div class="govuk-accordion__section">
<div class="govuk-accordion__section-header">
<h2 class="govuk-accordion__section-heading">
<span class="govuk-accordion__section-button" id="with-translations-heading-2">
Section B
</span>
</h2>
</div>
<div id="with-translations-content-2" class="govuk-accordion__section-content">
<ul class="govuk-list govuk-list--bullet">
<li>Example item 2</li>
</ul>
</div>
</div>
</div>Macro
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{{ govukAccordion({
id: "with-translations",
hideAllSectionsText: "Collapse all sections",
showAllSectionsText: "Expand all sections",
hideSectionText: "Collapse",
hideSectionAriaLabelText: "Collapse this section",
showSectionText: "Expand",
showSectionAriaLabelText: "Expand this section",
items: [
{
heading: {
text: "Section A"
},
content: {
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}
},
{
heading: {
text: "Section B"
},
content: {
html:
'<ul class="govuk-list govuk-list--bullet">\n' +
" <li>Example item 2</li>\n" +
"</ul>\n"
}
}
]
}) }}