Components

Accordion

The accordion component lets users show and hide sections of related content on a page.

Open this accordion example in a new tab

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.

HTML 
<div
  class="govuk-accordion"
  data-module="govuk-accordion"
  id="accordion-default"
>
  <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-default-heading-1"
        >
          Writing well for the web
        </span>
      </h2>
    </div>
    <div
      id="accordion-default-content-1"
      class="govuk-accordion__section-content"
    >
      <p class="govuk-body">
        This is the content for Writing well for the web.
      </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-default-heading-2"
        >
          Writing well for specialists
        </span>
      </h2>
    </div>
    <div
      id="accordion-default-content-2"
      class="govuk-accordion__section-content"
    >
      <p class="govuk-body">
        This is the content for Writing well for specialists.
      </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-default-heading-3"
        >
          Know your audience
        </span>
      </h2>
    </div>
    <div
      id="accordion-default-content-3"
      class="govuk-accordion__section-content"
    >
      <p class="govuk-body">This is the content for Know your audience.</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-default-heading-4"
        >
          How people read
        </span>
      </h2>
    </div>
    <div
      id="accordion-default-content-4"
      class="govuk-accordion__section-content"
    >
      <p class="govuk-body">This is the content for How people read.</p>
    </div>
  </div>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string Required.

Must be unique across the domain of your service if rememberExpanded is true (as the expanded state of individual instances of the component persists across page loads using session storage). 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-control attributes.
headingLevel integer

Heading level, from 1 to 6. Default is 2.
classes string

Classes to add to the accordion.
attributes object

HTML attributes (for example data attributes) to add to the accordion.
rememberExpanded boolean

Whether the expanded/collapsed state of the accordion should be saved when a user leaves the page and restored when they return. Default is true.
hideAllSectionsText string

The text content of the 'Hide all sections' button at the top of the accordion when all sections are expanded.
hideSectionText string

The text content of the 'Hide' button within each section of the accordion, which is visible when the section is expanded.
hideSectionAriaLabelText string

Text made available to assistive technologies, like screen-readers, as the final part of the toggle's accessible name when the section is expanded. Defaults to "Hide this section".
showAllSectionsText string

The text content of the 'Show all sections' button at the top of the accordion when at least one section is collapsed.
showSectionText string

The text content of the 'Show' button within each section of the accordion, which is visible when the section is collapsed.
showSectionAriaLabelText string

Text made available to assistive technologies, like screen-readers, as the final part of the toggle's accessible name when the section is collapsed. Defaults to "Show this section".
items array Required.

The sections within the accordion.

See items.
Options for items
Name Type Description
heading object Required.

The heading of each accordion section.

See heading.
summary object

The summary line of each accordion section.

See summary.
content object Required.

The content of each accordion section.

See content.
expanded boolean

Sets whether the section should be expanded when the page loads for the first time. Defaults to false.
Options for content
Name Type Description
text string Required.

If html is set, this is not required. The text content of each section, which is hidden when the section is closed. If html is provided, the text option will be ignored.
html string Required.

If text is set, this is not required. The HTML content of each section, which is hidden when the section is closed. If html is provided, the text option will be ignored.
Options for heading
Name Type Description
text string Required.

If html is set, this is not required. The heading text of each section. If html is provided, the text option will be ignored.
html string Required.

If text is set, this is not required. The heading HTML content of each section. The header is inside the HTML <button> element, so you can only add phrasing content to it. If html is provided, the text option will be ignored.
Options for summary
Name Type Description
text string

The summary line text content of each section. If html is provided, the text option will be ignored.
html string

The summary line HTML content of each section. The summary line is inside the HTML <button> element, so you can only add phrasing content to it. If html is provided, the text option will be ignored.

 
{% from "moduk/components/accordion/macro.njk" import modukAccordion -%}

{{ modukAccordion({
  id: "accordion-default",
  items: [
    {
      heading: {
        text: "Writing well for the web"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
      }
    },
    {
      heading: {
        text: "Writing well for specialists"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
      }
    },
    {
      heading: {
        text: "Know your audience"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
      }
    },
    {
      heading: {
        text: "How people read"
      },
      content: {
        html: "<p class='govuk-body'>This is the content for How people read.</p>"
      }
    }
  ]
}) -}}

See GOV.UK accordion component guidance for:

  • when to use this component
  • when not to use it
  • how it works

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.