This is the content for Writing well for the web.
This is the content for Writing well for the web.
Component
Accordion (experimental)
The accordion component lets users show and hide sections of related content on a page.
This component is based on the design system accordion component and is currently experimental because more research is needed to validate it. If using this component, please feed back any research findings to the Design System team.
How it looks (preview) (preview all)
Writing well for the web
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
How to call this component
<%= render "govuk_publishing_components/components/accordion", {
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
}
}
]
} %>GOV.UK Design System
This component incorporates components from the GOV.UK Design System:
Accessibility acceptance criteria
The accordion must:
- accept focus
- be usable with a keyboard
- the controls must change in appearance when keyboard focus moves to it
- the controls must indicate when the mouse is hovered over it
- be usable with touch
- be usable with voice commands
- have visible text
- indicate to users that each section can be expanded and collapsed
- inform the user when a step has been expanded or collapsed
- be readable when only the text of the page is zoomed in
- zoom in up to 300% without the text spilling off the screen
- pass colour contrast
- the accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
- section content must have aria-label / aria-labelledby with a value that refers to the button that controls display of the content.
Section headings must use a button element:
- so that sections can be toggled with the space and enter keys
- so that sections can’t be opened in a new tab or window
When JavaScript is unavailable the component must:
- be fully expanded
- not be marked as expandable
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Other examples
With supplied identification (preview)
An id is optional as it’s automatically generated, but it can be supplied if a specific id is required.
The id must be unique across the domain of your service - this is because as the open / closed state of individual instances of the accordion persists across page loads using localStorage.
Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-labelledby and aria-control attributes.
Writing well for the web
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
<%= render "govuk_publishing_components/components/accordion", {
id: "with-supplied-id-thats-unique-across-the-domain",
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
}
}
]
} %>With summary (preview)
Adds a subheading below each section heading.
Understanding agile project management
Introductions, methods, core features.
Working with agile methods
Workspaces, tools and techniques, user stories, planning.
Governing agile services
Principles, measuring progress, spending money.
Phases of an agile project
Discovery, alpha, beta, live and retirement.
<%= render "govuk_publishing_components/components/accordion", {
items: [
{
heading: {
text: "Understanding agile project management"
},
summary: {
text: "Introductions, methods, core features."
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Agile and government services: an introduction</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Agile methods: an introduction</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Core principles of agile</a> </li> </ul>")
}
},
{
heading: {
text: "Working with agile methods"
},
summary: {
text: "Workspaces, tools and techniques, user stories, planning."
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Creating an agile working environment</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Agile tools and techniques</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Set up a team wall</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Writing user stories</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Planning in agile</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Deciding on priorities</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Developing a roadmap</a> </li> </ul>")
}
},
{
heading: {
text: "Governing agile services"
},
summary: {
text: "Principles, measuring progress, spending money."
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">Governance principles for agile service delivery</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Measuring and reporting progress</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: check if you need approval to spend money on a service</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: apply for approval to spend money on a service</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Spend controls: the new pipeline process</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Working across organisational boundaries</a> </li> </ul>")
}
},
{
heading: {
text: "Phases of an agile project"
},
summary: {
text: "Discovery, alpha, beta, live and retirement."
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link\" href=\"#\">How the discovery phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the alpha phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the beta phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">How the live phase works</a> </li> <li> <a class=\"govuk-link\" href=\"#\">Retiring your service</a> </li> </ul>")
}
}
]
} %>With data attributes (preview)
Adds custom data attributes to the accordion to each section. Accepts an hash, so multiple attributes can be added.
The data_attributes hash is for the outermost element in the accordion.
Each item can also have a data_attributes hash. This is placed on the button that triggers the opening and closing - useful for differentiating between each section of the accordion.
Writing well for the web
This is the content for Writing well for the web.
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
<%= render "govuk_publishing_components/components/accordion", {
data_attributes: {
gtm: "gtm-accordion",
ga: "ga-accordion",
module: "gem-accordion",
anchor_navigation: false
},
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
},
data_attributes: {
gtm: "gtm-accordion-item-1"
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
},
data_attributes: {
gtm: "gtm-accordion-item-2"
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
},
data_attributes: {
gtm: "gtm-accordion-item-3"
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
},
data_attributes: {
gtm: "gtm-accordion-item-4"
}
}
]
} %>Different heading level (preview)
This will alter the level of the heading, not the appearance of the heading.
Writing well for the web
This is the content for Writing well for the web.
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
<%= render "govuk_publishing_components/components/accordion", {
heading_level: 3,
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
}
}
]
} %>With margin bottom (preview)
The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. It defaults to having a margin bottom of 30px.
Writing well for the web
This is the content for Writing well for the web.
Writing well for specialists
This is the content for Writing well for specialists.
<%= render "govuk_publishing_components/components/accordion", {
margin_bottom: 0,
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
}
]
} %>With section open (preview)
Adding expanded: true to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section’s default.
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
<%= render "govuk_publishing_components/components/accordion", {
items: [
{
heading: {
text: "Writing well for the web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
},
expanded: true
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
}
}
]
} %>With the anchor link navigation (preview)
Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. Live example.
This feature automatically opens accordions when an anchor link is clicked within another accordion that links to either the id of an accordion section heading or an id within the content of an accordion. This will also automatically navigate to and open accordions on page load using the same rules.
This feature won’t be used if the anchor_navigation flag isn’t passed as true to mitigate performance risk from event listeners on a large number of links.
Unlike with the accordion-wide custom id attribute, any ids passed to accordion headings as part of this feature aren’t stored in localStorage so don’t need to be unique across your domain, but should still be unique in the context of the page.
Writing well for the web
This is the content for Writing well for the web.
Writing well for specialists
This is the content for Writing well for specialists.
Know your audience
This is the content for Know your audience.
How people read
This is the content for How people read.
<%= render "govuk_publishing_components/components/accordion", {
anchor_navigation: true,
items: [
{
heading: {
text: "Writing well for the web",
id: "writing-well-for-the-web"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for the web.</p>")
}
},
{
heading: {
text: "Writing well for specialists"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Writing well for specialists.</p>")
}
},
{
heading: {
text: "Know your audience"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for Know your audience.</p>")
}
},
{
heading: {
text: "How people read"
},
content: {
html: sanitize("<p class='govuk-body'>This is the content for How people read.</p>")
}
}
]
} %>Condensed layout (preview)
This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
Understanding agile project management
Working with agile methods
Workspaces, tools and techniques, user stories, planning.
Governing agile services
Phases of an agile project
<%= render "govuk_publishing_components/components/accordion", {
condensed: true,
items: [
{
heading: {
text: "Understanding agile project management"
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile and government services: an introduction</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile methods: an introduction</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Core principles of agile</a> </li> </ul>")
}
},
{
heading: {
text: "Working with agile methods"
},
summary: {
text: "Workspaces, tools and techniques, user stories, planning."
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Creating an agile working environment</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Agile tools and techniques</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Set up a team wall</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Writing user stories</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Planning in agile</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Deciding on priorities</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Developing a roadmap</a> </li> </ul>")
}
},
{
heading: {
text: "Governing agile services"
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Governance principles for agile service delivery</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Measuring and reporting progress</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: check if you need approval to spend money on a service</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: apply for approval to spend money on a service</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Spend controls: the new pipeline process</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Working across organisational boundaries</a> </li> </ul>")
}
},
{
heading: {
text: "Phases of an agile project"
},
content: {
html: sanitize("<ul class=\"govuk-list\"> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the discovery phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the alpha phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the beta phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">How the live phase works</a> </li> <li> <a class=\"govuk-link govuk-body-s\" href=\"#\">Retiring your service</a> </li> </ul>")
}
}
]
} %>