Content · Gutenberg
Accordion block for WordPress
Collapsible accordion panels for FAQ, features, and more.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Collapsible accordion panels for FAQ, features, and more.
Inspector panels on this block: Behavior, Accordion Style, Effects, Header Colors, Content Colors, Border & Icon Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Allow multiple open” (Allow several panels to be open simultaneously); “Collapse all initially” (Start with all panels closed); “Enable FAQ Schema” (Add FAQPage structured data for SEO); “Accordion Style — Style” options: Default (Separated), Connected, Minimal, Boxed.
Where to find it
Gutenberg inserter → Content → search “Accordion” (block name `blockenberg/accordion` in block.json). Style it in the sidebar after insert.
How to use Accordion block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Accordion”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Behavior. Set “Allow multiple open”, “First panel open by default”, “Collapse all initially”, “Enable FAQ Schema”.
- Check the published page. The view script reads HTML data attributes: data-allow-multiple, data-schema. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Allow multiple open | On/off toggle in the inspector. Allow several panels to be open simultaneously. Off by default. Saved as `allowMultiple`. |
| First panel open by default | On/off toggle in the inspector. On by default. Saved as `firstOpen`. |
| Collapse all initially | On/off toggle in the inspector. Start with all panels closed. Off by default. Saved as `collapseAll`. |
| Enable FAQ Schema | On/off toggle in the inspector. Add FAQPage structured data for SEO. Off by default. Saved as `schemaEnabled`. |
| Accordion Style — Style | Select control; the chosen value is saved on the block. Options: Default (Separated); Connected; Minimal; Boxed. block.json default: default. Saved as `accordionStyle`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Chevron; Plus/Minus; Arrow; Caret. block.json default: chevron. Saved as `iconType`. |
| Icon Position | Select control; the chosen value is saved on the block. Options: Right; Left. block.json default: right. Saved as `iconPosition`. |
| Icon Size | Numeric range control in the inspector. Range 12–32. block.json default: 20. Saved as `iconSize`. |
| Gap Between Items | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `gap`. |
| Spacing — Top | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `headerPaddingTop`. |
| Spacing — Right | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `headerPaddingRight`. |
| Spacing — Bottom | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `headerPaddingBottom`. |
| Spacing — Left | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `headerPaddingLeft`. |
| Spacing — Top (Content Padding Top) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `contentPaddingTop`. |
| Spacing — Right (Content Padding Right) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `contentPaddingRight`. |
| Spacing — Bottom (Content Padding Bottom) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `contentPaddingBottom`. |
| Spacing — Left (Content Padding Left) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `contentPaddingLeft`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `borderRadius`. |
| Border Width | Numeric range control in the inspector. Range 0–5. block.json default: 1. Saved as `borderWidth`. |
| Border Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted; None. block.json default: solid. Saved as `borderStyle`. |
| Show Divider | On/off toggle in the inspector. Show line between header and content. On by default. Saved as `dividerEnabled`. |
| Divider Width | Numeric range control in the inspector. Range 1–5. block.json default: 1. Saved as `dividerWidth`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headerTypo`. |
| Typography — Content | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `contentTypo`. |
| Enable Animation | On/off toggle in the inspector. On by default. Saved as `enableAnimation`. |
| Animation Duration (ms) | Numeric range control in the inspector. Range 100–800. block.json default: 300. Saved as `animationDuration`. |
| Enable Hover Effect | On/off toggle in the inspector. On by default. Saved as `enableHoverEffect`. |
| Enable Shadow | On/off toggle in the inspector. On by default. Saved as `enableShadow`. |
| Shadow Horizontal | Numeric range control in the inspector. Range -20–20. block.json default: 0. Saved as `shadowHorizontal`. |
| Shadow Vertical | Numeric range control in the inspector. Range -20–20. block.json default: 2. Saved as `shadowVertical`. |
| Shadow Blur | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `shadowBlur`. |
| Shadow Spread | Numeric range control in the inspector. Range -10–10. block.json default: 0. Saved as `shadowSpread`. |
| Header Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `headerBg`. |
| Background (Hover) | Color control in the inspector. block.json default: #f1f5f9. Saved as `headerBgHover`. |
| Background (Active) | Color control in the inspector. block.json default: #e2e8f0. Saved as `headerBgActive`. |
| Header Colors — Text | Color control in the inspector. block.json default: #1e293b. Saved as `headerColor`. |
| Text (Hover) | Color control in the inspector. block.json default: #0f172a. Saved as `headerColorHover`. |
| Text (Active) | Color control in the inspector. block.json default: #0f172a. Saved as `headerColorActive`. |
| Content Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `contentBg`. |
| Content Colors — Text | Color control in the inspector. block.json default: #475569. Saved as `contentColor`. |
| Border & Icon Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Border (Active) | Color control in the inspector. block.json default: #cbd5e1. Saved as `borderColorActive`. |
| Border & Icon Colors — Icon | Color control in the inspector. block.json default: #64748b. Saved as `iconColor`. |
| Icon (Active) | Color control in the inspector. block.json default: #3b82f6. Saved as `iconColorActive`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Divider | Color control in the inspector. block.json default: #e2e8f0. Saved as `dividerColor`. |
| Border & Icon Colors — Shadow | Color control in the inspector. block.json default: rgba(0, 0, 0, 0.06). Saved as `shadowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-allow-multiple, data-schema.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- When schema is on, the script injects FAQPage JSON-LD into the document.
- A multiple-open flag on the wrapper decides whether several panels can stay open.
- Keyboard handlers move focus between items.
When this is the right block
- Collapsible accordion panels for FAQ, features, and more — that is the job of Accordion, not a generic content block.
- Use it when you need the editor control labeled “Allow multiple open”, which exists on this block’s inspector.
- It matches pages about accordion, faq, collapse.
- Pick this when you want FAQPage JSON-LD from the same markup visitors click.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Accordion block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Accordion”. It sits under Content. After insert, open Behavior and set “Allow multiple open”, “First panel open by default”, “Collapse all initially”, “Enable FAQ Schema”.
Does Accordion output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the Accordion Gutenberg block free?
Yes. Accordion ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Accordion to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Behavior, Accordion Style, Effects, Header Colors).
Related content blocks
Icon Accordion
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Toggle / Read More
A single expandable panel for 'Read More', spoilers, or collapsible content sections.
Spoiler / Reveal
Hide content behind a click-to-reveal button. Perfect for spoilers, quiz answers, bonus tips, or any content that should stay hidden until the reader chooses to see it.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Content Switcher
Two-panel toggle block — a pill/tab switch with a label for each state, each panel containing its own headline, body text, bullet list, image, and CTA. Great for Individual/Team, Starter/Pro, Before/After content.
Filterable Cards
A grid of content cards filterable by category, with optional images, labels, descriptions and links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Accordion from the Gutenberg inserter.