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.


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 All / Collapse All" toggle button with a class of .cwf-accordion__toggle.


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: