Good Accordion

Simple and good accordion plugin providing 2 blocks: Accordion and Accordion-pane. Drag an Accordion block into your post, page or custom post type and hit the ‘Add pane’ button for as often as you need.

Features:

• Setting for ‘One at a time’. Only one pane within an accordion can be opened. Uncheck this to allow for all panes to be opened simultaneously.
• Use ‘Tab’ key to focus panes and hit ‘Enter’ to open
• Extensive Use of Accessability attributes
• Optionally choose for HTML and tags.
• Panes scroll into view when a previous pane gets closed
• Adjust colors, margins and padding in the block editor
• Add styling via css, css-vars or theme.json

Use

Drag an Accordion block into a post or page or CPT and use the ‘Add pane’ button at the bottom of the block to add pane-blocks.

styling

At the root some basic styling variables are defined that can be overwritten by your theme. Some of these can be changed ad hoc by the user in de block-editor. These are:

    --wp--custom--accordion--transition-time: 0.1s;
    --wp--custom--accordion--margin-top: 0px;
    --wp--custom--accordion--margin-right: 0px;
    --wp--custom--accordion--margin-bottom: 0.1em;
    --wp--custom--accordion--margin-left: 0px;
    --wp--custom--accordion--header-padding-top: 0.5em;
    --wp--custom--accordion--header-padding-right: 2em;
    --wp--custom--accordion--header-padding-bottom: 0.5em;
    --wp--custom--accordion--header-padding-left: 2em;
    --wp--custom--accordion--content-padding-top: 0.5em;
    --wp--custom--accordion--content-padding-right: 2em;
    --wp--custom--accordion--content-padding-bottom: 0.5em;
    --wp--custom--accordion--content-padding-left: 2em;
    --wp--custom--accordion--header--text-color: #ffffff;
    --wp--custom--accordion--header--background-color: #666666;
    --wp--custom--accordion--header--active-text-color: #ffffff;
    --wp--custom--accordion--header--active-background-color: #999999;
    --wp--custom--accordion--body--text-color: #ffffff;
    --wp--custom--accordion--body--background-color: #666666;

The default values can also be defined in the theme.json of your (child-) theme:

Add them to the theme.json like so:

{
    "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
    "version": 3,
    "settings": {
        "custom": {
            "accordion": {
                "transitionTime": "0.1s",
                "marginTop": "0px",
                "marginRight": "0px",
                "marginBottom": "0.1em",
                "marginLeft": "0px",
                "headerPaddingTop": "1em",
                "headerPaddingRight": "1em",
                "headerPaddingBottom": "1em",
                "headerPaddingLeft": "1em",
                "contentPaddingTop": "0.5em",
                "contentPaddingRight": "2em",
                "contentPaddingBottom": "0.5em",
                "contentPaddingLeft": "2em",
                "headerTextColor": "#ffffff",
                "headerBackgroundColor" : "#666666",
                "activeHeaderTextColor": "#ffffff"
                "activeHeaderBackgroundColor": "#999999",
                "bodyTextColor": "#000000",
                "bodyBackgroundColor" : "#ffffff",
            }
        }
    }
}
Accessability
The pane-headers have a tab-index. If the Enter-key is pressed while a pane-header has focus, a click-event is triggered on that pane-header thereby activating / opening it.

Upload the plugin files to the /wp-content/plugins/good-accordion directory, or install the plugin using the WordPress plugins screen directly.

Activate the plugin in the ‘Plugins’ screen in WordPress

1. 

   Good Accordion

1.1

Release Date – june 2025

• Added some more ARIA attributes;

• Added optional details / summary tags. Div tags are default and allow for animated opening / closing of panes. Opening and closing of panes with details / summary tags are determined by browser behaviour;

• Added seperate padding for header and content of the pane. Padding css-vars are renamed thus:

  –wp–custom–accordion–header-padding-top: 0.5em;
  –wp–custom–accordion–header-padding-right: 2em;
  –wp–custom–accordion–header-padding-bottom: 0.5em;
  –wp–custom–accordion–header-padding-left: 2em;
  –wp–custom–accordion–content-padding-top: 0.5em;
  –wp–custom–accordion–content-padding-right: 2em;
  –wp–custom–accordion–content-padding-bottom: 0.5em;
  –wp–custom–accordion–content-padding-left: 2em;

• Added translations

1.0.2

Release Date – 14 April 2025

• Replaced Dashicons with some SVG sources
• Toggle switch for icon-position in header pane
• Updated translation
• Added nl_NL-formal translation

1.0.1

Release Date – 10 April 2025

• Minor bugfix in accordionpane header-tag