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.
Screenshots
Block inserter example 1 
Block inserter example 2 
Front-end example
Blocks
This plugin provides 1 block.
- Advanced Accordion Flexible accordion block allowing core and custom blocks to be used in any configuration.
Installation
- Upload the plugin folder to
/wp-content/plugins/crispycohd-advanced-accordion-block/, or install it via the Plugins screen in WordPress. - Activate the plugin through the Plugins screen.
- In the block editor, search for “Advanced Accordion” to add the block.
FAQ
-
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
/builddirectory is included in the distributed plugin zip, so users are not required to install Node.js or run build tools.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“CrispyCohd Advanced Accordion Block” is open source software. The following people have contributed to this plugin.
Contributors
Translate “CrispyCohd Advanced Accordion Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.