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

  • GOVUKFrontendComponent
    • Accordion

Constructors

Properties

$module: HTMLElement
$sections: NodeListOf<Element>
$showAllButton: HTMLButtonElement = null
$showAllIcon: HTMLElement = null
$showAllText: HTMLElement = null
config: AccordionConfig
controlsClass: string = 'govuk-accordion__controls'
downChevronIconClass: string = 'govuk-accordion-nav__chevron--down'
i18n: I18n
sectionButtonClass: string = 'govuk-accordion__section-button'
sectionClass: string = 'govuk-accordion__section'
sectionContentClass: string = 'govuk-accordion__section-content'
sectionExpandedClass: string = 'govuk-accordion__section--expanded'
sectionHeaderClass: string = 'govuk-accordion__section-header'
sectionHeadingClass: string = 'govuk-accordion__section-heading'
sectionHeadingDividerClass: string = 'govuk-accordion__section-heading-divider'
sectionHeadingTextClass: string = 'govuk-accordion__section-heading-text'
sectionHeadingTextFocusClass: string = 'govuk-accordion__section-heading-text-focus'
sectionShowHideTextClass: string = 'govuk-accordion__section-toggle-text'
sectionShowHideToggleClass: string = 'govuk-accordion__section-toggle'
sectionShowHideToggleFocusClass: string = 'govuk-accordion__section-toggle-focus'
sectionSummaryClass: string = 'govuk-accordion__section-summary'
sectionSummaryFocusClass: string = 'govuk-accordion__section-summary-focus'
showAllClass: string = 'govuk-accordion__show-all'
showAllTextClass: string = 'govuk-accordion__show-all-text'
upChevronIconClass: string = 'govuk-accordion-nav__chevron'
defaults: AccordionConfig = ...

Accordion default config

AccordionConfig

moduleName: string = 'govuk-accordion'

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

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

Accordion config schema

Methods

  • 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

  • Private

    Set section attributes when opened/closed

    Parameters

    • expanded: boolean

      Section expanded

    • $section: Element

      Section element

    Returns void

  • Private

    Set the state of the accordions in sessionStorage

    Parameters

    • $section: Element

      Section element

    • isExpanded: boolean

      Whether the section is expanded

    Returns void