Accordion

Standard

Default

A default accordion lets users show and hide sections of related content on a page.

Section A

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.

Section B

You can find your National Insurance number on your payslip, P60, or on letters about tax, pensions and benefits.

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-accordion" data-module="govuk-accordion">
  <div class="govuk-accordion__section">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button">Section A</span>
      </h2>
    </div>
    <div 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">Section B</span>
      </h2>
    </div>
    <div class="govuk-accordion__section-content">
      <p class="govuk-body">
        You can find your National Insurance number on your payslip, P60, or
        on letters about tax, pensions and benefits.
      </p>
    </div>
  </div>
</div>

---
import { Accordion, AccordionSection, AccordionSectionHeader, AccordionSectionHeading, AccordionSectionContent } from "@i-dot-ai-npm/component-library-astro";
---

<Accordion>
  <AccordionSection>
    <AccordionSectionHeader>
      <AccordionSectionHeading>Section A</AccordionSectionHeading>
    </AccordionSectionHeader>
    <AccordionSectionContent>
      <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>
    </AccordionSectionContent>
  </AccordionSection>
  <AccordionSection>
    <AccordionSectionHeader>
      <AccordionSectionHeading>Section B</AccordionSectionHeading>
    </AccordionSectionHeader>
    <AccordionSectionContent>
      <p class="govuk-body">
        You can find your National Insurance number on your payslip, P60, or
        on letters about tax, pensions and benefits.
      </p>
    </AccordionSectionContent>
  </AccordionSection>
</Accordion>

import { Accordion, AccordionSection, AccordionSectionHeader, AccordionSectionHeading, AccordionSectionContent } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Accordion>
      <AccordionSection>
        <AccordionSectionHeader>
          <AccordionSectionHeading>Section A</AccordionSectionHeading>
        </AccordionSectionHeader>
        <AccordionSectionContent>
          <p className="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>
        </AccordionSectionContent>
      </AccordionSection>
      <AccordionSection>
        <AccordionSectionHeader>
          <AccordionSectionHeading>Section B</AccordionSectionHeading>
        </AccordionSectionHeader>
        <AccordionSectionContent>
          <p className="govuk-body">
            You can find your National Insurance number on your payslip, P60, or
            on letters about tax, pensions and benefits.
          </p>
        </AccordionSectionContent>
      </AccordionSection>
    </Accordion>
  );
}

<script>
  import { Accordion, AccordionSection, AccordionSectionHeader, AccordionSectionHeading, AccordionSectionContent } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Accordion>
  <AccordionSection>
    <AccordionSectionHeader>
      <AccordionSectionHeading>Section A</AccordionSectionHeading>
    </AccordionSectionHeader>
    <AccordionSectionContent>
      <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>
    </AccordionSectionContent>
  </AccordionSection>
  <AccordionSection>
    <AccordionSectionHeader>
      <AccordionSectionHeading>Section B</AccordionSectionHeading>
    </AccordionSectionHeader>
    <AccordionSectionContent>
      <p class="govuk-body">
        You can find your National Insurance number on your payslip, P60, or
        on letters about tax, pensions and benefits.
      </p>
    </AccordionSectionContent>
  </AccordionSection>
</Accordion>

import { Accordion, AccordionSection, AccordionSectionHeader, AccordionSectionHeading, AccordionSectionContent } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Accordion>
      <AccordionSection>
        <AccordionSectionHeader>
          <AccordionSectionHeading>Section A</AccordionSectionHeading>
        </AccordionSectionHeader>
        <AccordionSectionContent>
          <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>
        </AccordionSectionContent>
      </AccordionSection>
      <AccordionSection>
        <AccordionSectionHeader>
          <AccordionSectionHeading>Section B</AccordionSectionHeading>
        </AccordionSectionHeader>
        <AccordionSectionContent>
          <p class="govuk-body">
            You can find your National Insurance number on your payslip, P60, or
            on letters about tax, pensions and benefits.
          </p>
        </AccordionSectionContent>
      </AccordionSection>
    </Accordion>
  );
}

When to use this component

Only use an accordion if there's evidence it’s helpful for the user to:

see an overview of multiple, related sections of content
choose to show and hide sections that are relevant to them
look across information that might otherwise be on different pages

For example, an accordion can work well if the user needs to reveal and compare information that’s relevant to them.

Accordions can also work well for people who use a service regularly. For example, users of caseworking systems who need to do familiar tasks quickly.

Test with users to decide if using an accordion outweighs the potential problems with hiding content.

When not to use this component

Accordions hide content from the user. Not all users will notice them or understand how they work. For this reason, you should only use them in specific situations and if user research supports it.

Do not use an accordion for content that all users need to see.

Test your content without an accordion first. Well-written and structured content, as shown in GOV.UK writing standards, can remove the need to use an accordion.

It’s usually better to:

simplify and reduce the amount of content
split the content across multiple pages
keep the content on a single page, separated by headings
use a list of links at the start of the page (known as 'anchor links') to take the user to particular sections of a page

Accordions work best for simple content and links. Do not use accordions to split up a series of questions. Use separate pages instead.

Do not put accordions within accordions, as it will make content difficult to find.

Do not use the accordion component if the amount of content inside will make the page slow to load.