Accordion Blocks

Gutenberg blocks for creating responsive accordion drop-downs.

Author:Phil Buchanan (profile at wordpress.org)
WordPress version required:5.9
WordPress version tested:5.9
Plugin version:1.5.0
Added to WordPress repository:12-03-2019
Last updated:07-02-2022
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:100
Rated by:35
Plugin URI:https://github.com/philbuchanan/Accordion-Blo...
Total downloads:166 668
Active installs:20 000+
plugin download
Click to start download

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__item {} /* The accordion item container */
.c-accordion__item.is-open {} /* is-open is added to open accordion items */
.c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */
.c-accordion__title {} /* An accordion item title */
.c-accordion__title--button {} /* An accordion item title that is using a `<button>` tag */
.c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */
.c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */
.c-accordion__content {} /* An accordion item content container */

Screenshots
FAQ
ChangeLog