Accordion Blocks

Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages.

The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme.

Features

• Adds a Gutenberg block for adding accordions to your site.
• Supports multiple accordions with individual settings for each accordion item.
• Fully responsive.
• Support for item IDs and direct links.
• Supports nesting accordions.
• Accessible (for users requiring tabbed keyboard navigation control).

Optional Features

• Open individual accordion items by default.
• Disable auto closing of accordion items.
• Manually close items by clicking the title again.
• Scroll page to title when it’s clicked open (including setting a scroll offset position).
• Set the HTML heading tag for the title element (h1–h6, button).
• Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults.
• Supports adding custom block styles using wp.blocks.registerBlockStyle.

Output

The plugin will ultimately output following HTML (simplified for this example):

Custom CSS

You can use the following CSS classes to customize the look of the accordion.