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):

<div class="wp-block-pb-accordion-item c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0"> <h2 id="at-76840" class="c-accordion__title js-accordion-controller" tabindex="0" role="button" aria-controls="ac-76840" aria-expanded="false"> Title with H2 tag </h2> <div id="ac-76840" class="c-accordion__content" style="display:none" aria-hidden="true"> <p>Content</p> </div> </div>

Custom CSS

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

c-accordion__content {} /* An accordion item content container */