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

Properties

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

Methods

checkIfAllSectionsOpen constructHeaderMarkup getButtonPunctuationEl initControls initSectionHeaders isExpanded onBeforeMatch onSectionToggle onShowOrHideAllToggle setExpanded setInitialState storeState updateShowAllButton

Constructors

constructor

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.

Static schema

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

Accordion config schema

Type declaration

  • properties: {
        i18n: {
            type: "object";
        };
        rememberExpanded: {
            type: "boolean";
        };
    }
    • i18n: {
          type: "object";
      }
      • type: "object"
    • rememberExpanded: {
          type: "boolean";
      }
      • type: "boolean"

Constant

Methods

Private checkIfAllSectionsOpen

Private constructHeaderMarkup

Private getButtonPunctuationEl

Private initControls

Private initSectionHeaders

Private isExpanded

Private onBeforeMatch

Private onSectionToggle

Private onShowOrHideAllToggle

Private setExpanded

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

    Set section attributes when opened/closed

    Parameters

    • expanded: boolean

      Section expanded

    • $section: Element

      Section element

    Returns void

Private setInitialState

Private storeState

Private updateShowAllButton

Settings

Member Visibility

Theme

On This Page

constructor$module$sections$showAllButton$showAllIcon$showAllTextbrowserSupportsSessionStorageconfigcontrolsClassdownChevronIconClassi18nsectionButtonClasssectionClasssectionContentClasssectionExpandedClasssectionHeaderClasssectionHeadingClasssectionHeadingDividerClasssectionHeadingTextClasssectionHeadingTextFocusClasssectionShowHideTextClasssectionShowHideToggleClasssectionShowHideToggleFocusClasssectionSummaryClasssectionSummaryFocusClassshowAllClassshowAllTextClassupChevronIconClassdefaultsmoduleNameschemacheckIfAllSectionsOpenconstructHeaderMarkupgetButtonPunctuationElinitControlsinitSectionHeadersisExpandedonBeforeMatchonSectionToggleonShowOrHideAllTogglesetExpandedsetInitialStatestoreStateupdateShowAllButton

Generated using TypeDoc