Class Accordion

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-expanded attribute, which also provides accessibility.

Preserve

Hierarchy

GOVUKFrontendComponent
- Accordion

Constructors

constructor

new Accordion($module, config?): Accordion
Parameters
- $module: Element
  HTML element to use for accordion
- Optional config: AccordionConfig = {}
  Accordion config
Returns Accordion
Overrides GOVUKFrontendComponent.constructor
- Defined in govuk/components/accordion/accordion.mjs:119

Properties

`Private` $module

$module: HTMLElement

`Private` $sections

$sections: NodeListOf<Element>

`Private` $showAllButton

$showAllButton: HTMLButtonElement = null

`Private` $showAllIcon

$showAllIcon: HTMLElement = null

`Private` $showAllText

$showAllText: HTMLElement = null

`Private` browserSupportsSessionStorage

browserSupportsSessionStorage: boolean = false

`Private` config

config: AccordionConfig

`Private` controlsClass

controlsClass: string = 'govuk-accordion__controls'

`Private` downChevronIconClass

downChevronIconClass: string = 'govuk-accordion-nav__chevron--down'

`Private` i18n

i18n: I18n

`Private` sectionButtonClass

sectionButtonClass: string = 'govuk-accordion__section-button'

`Private` sectionClass

sectionClass: string = 'govuk-accordion__section'

`Private` sectionContentClass

sectionContentClass: string = 'govuk-accordion__section-content'

`Private` sectionExpandedClass

sectionExpandedClass: string = 'govuk-accordion__section--expanded'

`Private` sectionHeaderClass

sectionHeaderClass: string = 'govuk-accordion__section-header'

`Private` sectionHeadingClass

sectionHeadingClass: string = 'govuk-accordion__section-heading'

`Private` sectionHeadingDividerClass

sectionHeadingDividerClass: string = 'govuk-accordion__section-heading-divider'

`Private` sectionHeadingTextClass

sectionHeadingTextClass: string = 'govuk-accordion__section-heading-text'

`Private` sectionHeadingTextFocusClass

sectionHeadingTextFocusClass: string = 'govuk-accordion__section-heading-text-focus'

`Private` sectionShowHideTextClass

sectionShowHideTextClass: string = 'govuk-accordion__section-toggle-text'

`Private` sectionShowHideToggleClass

sectionShowHideToggleClass: string = 'govuk-accordion__section-toggle'

`Private` sectionShowHideToggleFocusClass

sectionShowHideToggleFocusClass: string = 'govuk-accordion__section-toggle-focus'

`Private` sectionSummaryClass

sectionSummaryClass: string = 'govuk-accordion__section-summary'

`Private` sectionSummaryFocusClass

sectionSummaryFocusClass: string = 'govuk-accordion__section-summary-focus'

`Private` showAllClass

showAllClass: string = 'govuk-accordion__show-all'

`Private` showAllTextClass

showAllTextClass: string = 'govuk-accordion__show-all-text'

`Private` upChevronIconClass

upChevronIconClass: string = 'govuk-accordion-nav__chevron'

`Static` defaults

defaults: AccordionConfig = ...

Accordion default config

See

AccordionConfig

Constant

`Static` moduleName

moduleName: string = 'govuk-accordion'

Name for the component used when initialising using data-module attributes.

Methods

`Private` checkIfAllSectionsOpen

checkIfAllSectionsOpen(): boolean
Private
Check if all sections are open

Returns boolean
True if all sections are open
- Defined in govuk/components/accordion/accordion.mjs:493

`Private` constructHeaderMarkup

constructHeaderMarkup($header, index): void
Private
Construct section header
Parameters
- $header: Element
  Section header
- index: number
  Section index
Returns void
- Defined in govuk/components/accordion/accordion.mjs:235

`Private` getButtonPunctuationEl

getButtonPunctuationEl(): Element
Private
Create 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

Returns Element
DOM element
- Defined in govuk/components/accordion/accordion.mjs:581

`Private` initControls

initControls(): void
Private
Initialise controls and set attributes

Returns void
- Defined in govuk/components/accordion/accordion.mjs:164

`Private` initSectionHeaders

initSectionHeaders(): void
Private
Initialise section headers

Returns void
- Defined in govuk/components/accordion/accordion.mjs:205

`Private` isExpanded

isExpanded($section): boolean
Private
Get state of section
Parameters
- $section: Element
  Section element
Returns boolean
True if expanded
- Defined in govuk/components/accordion/accordion.mjs:483

`Private` onBeforeMatch

onBeforeMatch(event): void
Private
When a section is opened by the user agent via the 'beforematch' event
Parameters
- event: Event
  Generic event
Returns void
- Defined in govuk/components/accordion/accordion.mjs:354

`Private` onSectionToggle

onSectionToggle($section): void
Private
When section toggled, set and store state
Parameters
- $section: Element
  Section element
Returns void
- Defined in govuk/components/accordion/accordion.mjs:375

`Private` onShowOrHideAllToggle

onShowOrHideAllToggle(): void
Private
When Open/Close All toggled, set and store state

Returns void
- Defined in govuk/components/accordion/accordion.mjs:388

`Private` setExpanded

setExpanded(expanded, $section): void
Private
Set section attributes when opened/closed
Parameters
- expanded: boolean
  Section expanded
- $section: Element
  Section element
Returns void
- Defined in govuk/components/accordion/accordion.mjs:406

`Private` setInitialState

setInitialState($section): void
Private
Read the state of the accordions from sessionStorage
Parameters
- $section: Element
  Section element
Returns void
- Defined in govuk/components/accordion/accordion.mjs:553

`Private` storeState

storeState($section): void
Private
Set the state of the accordions in sessionStorage
Parameters
- $section: Element
  Section element
Returns void
- Defined in govuk/components/accordion/accordion.mjs:527

`Private` updateShowAllButton

updateShowAllButton(expanded): void
Private
Update "Show all sections" button
Parameters
- expanded: boolean
  Section expanded
Returns void
- Defined in govuk/components/accordion/accordion.mjs:509

Class Accordion

Preserve

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Accordion

Properties

Private $module

Private $sections

Private $showAllButton

Private $showAllIcon

Private $showAllText

Private browserSupportsSessionStorage

Private config

Private controlsClass

Private downChevronIconClass

Private i18n

Private sectionButtonClass

Private sectionClass

Private sectionContentClass

Private sectionExpandedClass

Private sectionHeaderClass

Private sectionHeadingClass

Private sectionHeadingDividerClass

Private sectionHeadingTextClass

Private sectionHeadingTextFocusClass

Private sectionShowHideTextClass

Private sectionShowHideToggleClass

Private sectionShowHideToggleFocusClass

Private sectionSummaryClass

Private sectionSummaryFocusClass

Private showAllClass

Private showAllTextClass

Private upChevronIconClass

Static defaults

See

Constant

Static moduleName

Methods

Private checkIfAllSectionsOpen

Returns boolean

Private constructHeaderMarkup

Parameters

Returns void

Private getButtonPunctuationEl

Returns Element

Private initControls

Returns void

Private initSectionHeaders

Returns void

Private isExpanded

Parameters

Returns boolean

Private onBeforeMatch

Parameters

Returns void

Private onSectionToggle

Parameters

Returns void

Private onShowOrHideAllToggle

Returns void

Private setExpanded

Parameters

Returns void

Private setInitialState

Parameters

Returns void

Private storeState

Parameters

Returns void

Private updateShowAllButton

Parameters

Returns void

Settings

Member Visibility

`Private` $module

`Private` $sections

`Private` $showAllButton

`Private` $showAllIcon

`Private` $showAllText

`Private` browserSupportsSessionStorage

`Private` config

`Private` controlsClass

`Private` downChevronIconClass

`Private` i18n

`Private` sectionButtonClass

`Private` sectionClass

`Private` sectionContentClass

`Private` sectionExpandedClass

`Private` sectionHeaderClass

`Private` sectionHeadingClass

`Private` sectionHeadingDividerClass

`Private` sectionHeadingTextClass

`Private` sectionHeadingTextFocusClass

`Private` sectionShowHideTextClass

`Private` sectionShowHideToggleClass

`Private` sectionShowHideToggleFocusClass

`Private` sectionSummaryClass

`Private` sectionSummaryFocusClass

`Private` showAllClass

`Private` showAllTextClass

`Private` upChevronIconClass

`Static` defaults

`Static` moduleName

`Private` checkIfAllSectionsOpen

`Private` constructHeaderMarkup

`Private` getButtonPunctuationEl

`Private` initControls

`Private` initSectionHeaders

`Private` isExpanded

`Private` onBeforeMatch

`Private` onSectionToggle

`Private` onShowOrHideAllToggle

`Private` setExpanded

`Private` setInitialState

`Private` storeState

`Private` updateShowAllButton