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.

Hierarchy (View Summary)

Constructors

constructor

Properties

_$root _config $sections $showAllButton $showAllIcon $showAllText controlsClass downChevronIconClass i18n sectionButtonClass sectionClass sectionContentClass sectionExpandedClass sectionHeaderClass sectionHeadingClass sectionHeadingDividerClass sectionHeadingTextClass sectionHeadingTextFocusClass sectionShowHideTextClass sectionShowHideToggleClass sectionShowHideToggleFocusClass sectionSummaryClass sectionSummaryFocusClass showAllClass showAllTextClass upChevronIconClass defaults elementType moduleName schema

Accessors

$root config

Methods

[configOverride] areAllSectionsOpen constructHeaderMarkup getButtonPunctuationEl getIdentifier initControls initSectionHeaders isExpanded onBeforeMatch onSectionToggle onShowOrHideAllToggle setExpanded setInitialState storeState updateShowAllButton checkSupport

Constructors

constructor

Properties

Protected_$root

_$root: HTMLElement

_config

_config: AccordionConfig

Private$sections

$sections: NodeListOf<Element>

Private$showAllButton

$showAllButton: HTMLButtonElement = null

Private$showAllIcon

$showAllIcon: HTMLElement = null

Private$showAllText

$showAllText: HTMLElement = null

PrivatecontrolsClass

controlsClass: string = 'govuk-accordion__controls'

PrivatedownChevronIconClass

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

Privatei18n

i18n: I18n

PrivatesectionButtonClass

sectionButtonClass: string = 'govuk-accordion__section-button'

PrivatesectionClass

sectionClass: string = 'govuk-accordion__section'

PrivatesectionContentClass

sectionContentClass: string = 'govuk-accordion__section-content'

PrivatesectionExpandedClass

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

PrivatesectionHeaderClass

sectionHeaderClass: string = 'govuk-accordion__section-header'

PrivatesectionHeadingClass

sectionHeadingClass: string = 'govuk-accordion__section-heading'

PrivatesectionHeadingDividerClass

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

PrivatesectionHeadingTextClass

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

PrivatesectionHeadingTextFocusClass

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

PrivatesectionShowHideTextClass

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

PrivatesectionShowHideToggleClass

sectionShowHideToggleClass: string = 'govuk-accordion__section-toggle'

PrivatesectionShowHideToggleFocusClass

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

PrivatesectionSummaryClass

sectionSummaryClass: string = 'govuk-accordion__section-summary'

PrivatesectionSummaryFocusClass

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

PrivateshowAllClass

showAllClass: string = 'govuk-accordion__show-all'

PrivateshowAllTextClass

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

PrivateupChevronIconClass

upChevronIconClass: string = 'govuk-accordion-nav__chevron'

Static Constantdefaults

defaults: AccordionConfig = ...

Accordion default config

See

AccordionConfig

StaticelementType

elementType: new () => Element = HTMLElement

StaticmoduleName

moduleName: string = 'govuk-accordion'

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

Static Constantschema

schema: Readonly<
    {
        properties: {
            i18n: { type: "object" };
            rememberExpanded: { type: "boolean" };
        };
    },
> = ...

Accordion config schema

Satisfies

Accessors

Protected$root

Protectedconfig

Methods

[configOverride]

  • "[configOverride]"(param?: ObjectNested): ObjectNested
  • Internal Virtual

    configOverride

    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.

    Parameters

    Returns ObjectNested

    return - Configuration object

PrivateareAllSectionsOpen

PrivateconstructHeaderMarkup

  • constructHeaderMarkup($header: Element, index: number): void
  • Private

    Construct section header

    Parameters

    • $header: Element

      Section header

    • index: number

      Section index

    Returns void

PrivategetButtonPunctuationEl

getIdentifier

  • getIdentifier($section: Element): string

  • 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.

    Parameters

    • $section: Element

      Section element

    Returns string

    Identifier for section

PrivateinitControls

PrivateinitSectionHeaders

PrivateisExpanded

PrivateonBeforeMatch

PrivateonSectionToggle

PrivateonShowOrHideAllToggle

PrivatesetExpanded

  • setExpanded(expanded: boolean, $section: Element): void
  • Private

    Set section attributes when opened/closed

    Parameters

    • expanded: boolean

      Section expanded

    • $section: Element

      Section element

    Returns void

PrivatesetInitialState

PrivatestoreState

  • storeState($section: Element, isExpanded: boolean): void
  • Private

    Set the state of the accordions in sessionStorage

    Parameters

    • $section: Element

      Section element

    • isExpanded: boolean

      Whether the section is expanded

    Returns void

PrivateupdateShowAllButton

StaticcheckSupport

Settings

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods