Accordion

The accordion component is a group of collapsable panels that hide or reveal their content when its header is clicked. When an accordion panel heading is clicked, all other accordion panels that are expanded will collapse. The accordion can be used with a single collapsible panel or multiple. When more than one collapsible panel is used within an accordion, a toggle button is added, allowing users to expand/collapse all accordion panels at once.

Markup

Whether you are using an accordion with a single panel or multiple, ensure that all panels are wrapped in a div.cwf-accordion__wrapper element. Each individual panel will have a div.cwf-accordion__panel element.

If you are using this component with a group of accordions ensure you are rendering the expand/collapse all toggle button with a class of .cwf-accordion__toggle. This is automatically done with the core Twig macro and CMS implementation.

Javascript

Each accordion panel heading is listening for click events or keydown events when focused.

The following events will trigger the panel to expand or collapse:

• A click
• When focused, pressing the Space key
• When focused, pressing the Enter key

The following keydown events will change panel heading focus:

• Up arrow - Moves focus to the previous panel's heading, unless on the first panel which will focus the last panel's heading
• Down arrow - Moves focus to the next panel's heading, unless on the last panel which will focus the first panel's heading
• Home - Focuses the first panel's heading
• End - Focuses the last panel's heading

T4 implementation

Accordions are implemented in T4 as the "Accordion Panel" plugin, meaning its classes are .plugin- prefixed instead of .cwf- prefixed.

The plugin outputs a single panel, and using 1 or more sequential plugins group them together as an entire accordion. The expand/collapse all toggle button is automatically included when more than one panel is used within the accordion group.

Area keywords

The "Accordion Panel" plugin can be moved to different areas on the page using the area:{$} injector in the "Injectors" field, where $ is one of the following keywords:

• feature - Moves the accordion panel to the feature area of the page (below the main navigation, above the sidebars and main content).
• sidebar - Moves the accordion panel to the sidebar area of the page (right of the main content).
• footer - Moves the accordion panel to the footer area of the page (above the footer, below the sidebars and main content).

This plugin can also be used within the global "Site-Feature", "Site-Sidebar", and "Site-Footer" sections to have it displayed globally within the feature, sidebar, and footer areas respectively.

Injectors

In the "Injectors" field of the "Accordion Panel" plugin, the following injectors can be used:

• area:{feature|sidebar|footer} - Changes the area on the page the accordion panel is displayed.
• id:{custom_id} - Overrides the default, T4 ID of the accordion panel with a custom ID.
• class:{custom_classes} - Adds custom classes to the accordion panel.
• style:{custom_styles} - Adds custom styles to a style attribute of the accordion panel.
• before:{custom_html} - Adds custom HTML before the accordion panel.
• after:{custom_html} - Adds custom HTML after the accordion panel.

Examples

Single

Group