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:

The following keydown events will change panel heading focus:

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.

Areas

In the "Name" field of the "Accordion Panel" plugin, the following case-insensitive keywords can be used to change the area in which the accordion panel appears:

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 "Name" field of the "Accordion Panel" plugin, the following injectors can be used:

Examples

Single

Group