Components

Accordion

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

See the GOV.UK Design System documentation on accordions for more information on when to use this component.

This is the content for Writing well for the web.

This is the content for Writing well for specialists

This is the content for Know your audience

This is the content for How people read

<gv-accordion>
  <gv-accordion-section heading="Writing well for the web">
    <p class="govuk-body">This is the content for Writing well for the web.</p>
  </gv-accordion-section>
  <gv-accordion-section heading="Writing well for specialists">
    <p class="govuk-body">This is the content for Writing well for specialists</p>
  </gv-accordion-section>
  <gv-accordion-section heading="Know your audience">
    <p class="govuk-body">This is the content for Know your audience</p>
  </gv-accordion-section>
  <gv-accordion-section heading="How people read">
    <p class="govuk-body">This is the content for How people read</p>
  </gv-accordion-section>
</gv-accordion>

Controlling which sections are open

By default, all sections will be closed. You can bind a boolean value with v-model:expanded to set and keep track of the open state of the accordion section.

You can also set :remember-expanded="true" on the accordion to let the browser remember which sections a user has open. The state of each section will be restored next time the accordion is mounted. Each section must have a static id for this to work, otherwise the wrong sections may be restored. The id must also be unique across the (sub)domain your service is hosted on.

This behaviour is different to the GOV.UK Frontend Nunjucks macros, where rememberExpanded defaults to true. This is because in GOV.UK Vue, id is optional and the expanded state can't be stored reliably if an ID is not provided.

If a section has v-model:expanded set to true or false and remember-expanded is true, the value of v-model:expanded takes precedence. For example, if the stored state of a section is open but v-model:expanded is false, the section will be closed by default.

This section is forced to be open when first loaded.

This section is forced to be closed when first loaded

This section has no forced state, so defaults to closed

Accordion section v-model states

• Section A: true
• Section B: false
• Section C:

<script setup lang="ts">
import { ref } from 'vue'

const sectionAIsOpen = ref(true)
const sectionBIsOpen = ref(false)
const sectionCIsOpen = ref(null)
</script>

<template>
  <gv-accordion>
    <gv-accordion-section heading="Section A - forced open" v-model:expanded="sectionAIsOpen">
      <p class="govuk-body">This section is forced to be open when first loaded.</p>
    </gv-accordion-section>
    <gv-accordion-section heading="Section B - forced closed" v-model:expanded="sectionBIsOpen">
      <p class="govuk-body">This section is forced to be closed when first loaded</p>
    </gv-accordion-section>
    <gv-accordion-section heading="Section C - default state" v-model:expanded="sectionCIsOpen">
      <p class="govuk-body">This section has no forced state, so defaults to closed</p>
    </gv-accordion-section>
  </gv-accordion>
  
  <gv-inset-text aria-live="polite">
    <h2 class="govuk-heading-s">Accordion section v-model states</h2>
    <ul class="govuk-list govuk-list--bullet">
      <li>Section A: {{ sectionAIsOpen }}</li>
      <li>Section B: {{ sectionBIsOpen }}</li>
      <li>Section C: {{ sectionCIsOpen }}</li>
    </ul>
  </gv-inset-text>
</template>

GvAccordion

Props

Name	Type	Description
id	string	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 sessionStorage). 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. If you don't provide an ID, one will be generated automatically.
headingLevel	number	Heading level of the section headings, from 1 to 6. Defaults to 2.
rememberExpanded	boolean	Whether the expanded/collapsed state of the accordion sections should be saved and restored each time the user sees the accordion. If this is enabled you must set static ids on each GvAccordionSection to ensure the correct sections are restored. Defaults to false.
hideAllSectionsText	string	The text content of the 'Hide all sections' button at the top of the accordion when all sections are expanded. Defaults to 'Hide all sections'.
hideSectionText	string	The text content of the 'Hide' button within each section of the accordion, which is visible when the section is expanded. Defaults to 'Hide'.
hideSectionAriaLabel	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. Defaults to 'Show all sections'.
showSectionText	string	The text content of the 'Show' button within each section of the accordion, which is visible when the section is collapsed. Defaults to 'Show'.
showSectionAriaLabel	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'.

Slots

Name	Description
default	A list of gv-accordion-sections

GvAccordionSection

Props

Name	Type	Description
id	string	The ID for this section. If you don't provide an ID, one will be generated automatically.
heading	string	The title of the section.
summary	string	Text content for the summary line. If content is provided in the summary slot, this prop will be ignored.
content	string	Text content of this section, which is hidden when the section is closed. If content is provided in the default slot, this prop will be ignored.
expanded	boolean	Sets whether the section is expanded. If set, the model value will override any stored expansion state if rememberExpanded has been set on the parent GvAccordion. Use v-model:expanded to keep track of the expansion state. Defaults to null.

Slots

Name	Description
summary	The content of the summary. If content is provided in this slot, the summary prop will be ignored.
default	The content of the accordion section. If content is provided in this slot, the content prop will be ignored.