govuk-frontend
    Preparing search index...

    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)

    Index

    Constructors

    Properties

    _$root: HTMLElement
    _config: AccordionConfig
    $sections: NodeListOf<Element>
    $showAllButton: HTMLButtonElement = null
    $showAllIcon: HTMLElement = null
    $showAllText: HTMLElement = null
    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

    elementType: new () => Element = HTMLElement
    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

    Accessors

    Methods

    • 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

      • Optionalparam: Partial<AccordionConfig>

        Configuration object

      Returns Partial<AccordionConfig>

      return - Configuration object

    • Private

      Construct section header

      Parameters

      • $header: Element

        Section header

      • index: number

        Section index

      Returns void

    • 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