FAIR

Federated and Independent Repositories

CrispyCohd Advanced Accordion Block

Plugin Banner

CrispyCohd Advanced Accordion Block

by CrispyCohd

Download
Description

CrispyCohd Advanced Accordion Block provides a flexible, block-based accordion for the WordPress editor.

Built to align with WCAG 2.2 and WAI-ARIA Authoring Practices for accordions.

The accordion is built using normal blocks:

  • Header area: add any blocks you want
  • Content area: add any blocks you want
  • Optional divider between the two

The block supports two animation styles, slide and fade.
It also supports a built-in caret, a custom SVG, or a custom image for the toggle icon.

Accessibility is a core focus of the block. The front-end output includes a dedicated toggle button, keyboard navigation, ARIA relationships, and reduced motion support.

  1. Upload the plugin folder to /wp-content/plugins/crispycohd-advanced-accordion-block/, or install it via the Plugins screen in WordPress.
  2. Activate the plugin through the Plugins screen.
  3. In the block editor, search for “Advanced Accordion” to add the block.
  1. Block inserter example 1

    Block inserter example 1

  2. Block inserter example 2

    Block inserter example 2

  3. Front-end example

    Front-end example

Can I use any blocks inside the accordion?

Yes. The header and content areas are normal Group blocks, so you can use core and custom blocks.

Does this work with Full Site Editing and classic themes?

Yes. The block works with both Full Site Editing themes and classic themes.

Is the accordion accessible?

Yes. The block includes a dedicated toggle button, proper ARIA relationships between the toggle and panel, keyboard navigation (Tab, Enter/Space, arrow keys, Home/End), visible focus handling for keyboard users, and reduced motion support.
Built to align with WCAG 2.2 and WAI-ARIA Authoring Practices for accordions.

Can multiple accordions be open at the same time?

Yes. You can choose between independent accordion behaviour or exclusive open mode using the block inspector.

Does the accordion work without JavaScript?

The block outputs structured HTML and CSS, but the toggle interaction relies on a small front-end script.

How are the block assets built?

This plugin uses @wordpress/scripts.

Human-readable source files are located in:

/blocks/advanced-accordion/src/

Compiled assets are generated from the source files and written to:

/blocks/advanced-accordion/build/

The compiled /build directory is included in the distributed plugin zip, so users are not required to install Node.js or run build tools.

1.0.0

  • Initial release.
Back to top