HTML element to use for accordion
Optionalconfig: AccordionConfig = {}Accordion config
Protected_Private$sectionsPrivate$showPrivate$showPrivate$showPrivatecontrolsPrivatedownPrivatei18nPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivatesectionPrivateshowPrivateshowPrivateupStatic ConstantdefaultsAccordion default config
StaticelementStaticmoduleName for the component used when initialising using data-module attributes.
Static ConstantschemaAccordion config schema
Protected$rootProtectedReturns the root element of the component
ProtectedconfigProtectedReturns the root element of the component
Internal VirtualconfigOverride
Function which defines configuration overrides to prioritize properties from the root element's dataset.
It should take a subset of configuration as input and return a new configuration object with properties that should be overridden based on the root element's dataset. A Symbol is used for indexing to prevent conflicts.
Optionalparam: Partial<AccordionConfig>Configuration object
return - Configuration object
PrivatearePrivateCheck if all sections are open
True if all sections are open
PrivateconstructPrivateConstruct section header
Section header
Section index
PrivategetPrivateCreate an element to improve semantics of the section button with punctuation
Adding punctuation to the button can also improve its general semantics by dividing its contents into thematic chunks. See https://github.com/alphagov/govuk-frontend/issues/2327#issuecomment-922957442
DOM element
Get the identifier for a section
We need a unique way of identifying each content in the Accordion.
Since an #id should be unique and an id is required for aria-
attributes id can be safely used.
Section element
Identifier for section
PrivateinitPrivateInitialise controls and set attributes
PrivateinitPrivateInitialise section headers
PrivateisPrivateGet state of section
Section element
True if expanded
PrivateonPrivateWhen a section is opened by the user agent via the 'beforematch' event
Generic event
PrivateonPrivateWhen section toggled, set and store state
Section element
PrivateonPrivateWhen Open/Close All toggled, set and store state
PrivatesetPrivateSet section attributes when opened/closed
Section expanded
Section element
PrivatesetPrivateRead the state of the accordions from sessionStorage
Section element
PrivatestorePrivateSet the state of the accordions in sessionStorage
Section element
Whether the section is expanded
PrivateupdatePrivateUpdate "Show all sections" button
Section expanded
Staticcheck
Accordion component
This allows a collection of sections to be collapsed by default, showing only their headers. Sections can be expanded or collapsed individually by clicking their headers. A "Show all sections" button is also added to the top of the accordion, which switches to "Hide all sections" when all the sections are expanded.
The state of each section is saved to the DOM via the
aria-expandedattribute, which also provides accessibility.