Accordions ​

The accordion component provides a set of classes for grouping content into panels that readers can expand or collapse.

Base classes ​

Inside .accordion, use an .accordion-item for each panel. Start each item with an .accordion-item-header containing a heading with the .accordion-item-title class. The heading holds the .accordion-item-toggle button.

Place .accordion-item-content after the header. Put the main content in .accordion-item-body and add an .accordion-item-footer if you need room for extra details.

For an item that starts expanded, add .show to the item and set aria-expanded="true" on its button. For an item that starts collapsed, use .hide and aria-expanded="false". Once the accordion is initialized, readers can toggle a panel by clicking its button or pressing Enter or Space while the button has focus.

Initialization ​

Run the accordion generator after the markup is in the DOM. The generator links each toggle to its panel and updates aria-expanded as the panel opens or closes.

import generateAccordions from "@graupl/core/accordion/generator";

generateAccordions();

Expand and collapse all ​

To let readers open or close every panel at once, put the buttons in an .accordion-control-container. Give both buttons the .accordion-control class, then add .expand-all to the button that opens the panels and .collapse-all to the one that closes them.

Options ​

By default, readers can expand multiple panels and collapse all of them. To limit the accordion to one expanded panel at a time, set allowExpandMultiple to false.

Set allowCollapseAll to false to keep the last expanded panel from closing. Start with at least one panel expanded when using this setting. If you also limit the accordion to one expanded panel, start with exactly one.

Set optionalKeySupport to true so readers can use the Up and Down arrows, Home, and End to move between item toggles.

Pass these options to the generator to apply them to the accordions it initializes. To configure an individual accordion, set data-graupl-accordion-options on the .accordion element. The attribute takes JSON, such as data-graupl-accordion-options='{"optionalKeySupport":true}'.

generateAccordions({
  options: {
    allowExpandMultiple: false,
    allowCollapseAll: false,
    optionalKeySupport: true,
  },
});

Variants ​

By default, no theme variants are generated.

If you are compiling your own version of Graupl, you can set the accordion module’s $themeable variable to true to generate the .primary, .secondary, and .tertiary variants. Add the variant class to .accordion to style the whole accordion, or to an element inside it to style that part separately.

Custom Properties ​

The following custom properties can be used to customize the accordion component:

Sass variables ​

The following Sass variables can be used to customize the generation of the accordion component: