New New in Pro: FAQ schema and deep links, set per accordion. See what’s new

Live demos Get Pro · from $29

Easy Accordion Block documentation

Everything you need to build accordions and FAQ sections: from installing the plugin to styling, Pro features and developer hooks.

  • 20 sections · 64 topics
  • 25 min read
  • Free 1.5.3 · Pro 2.0.0
  • Updated Oct 25, 2026

Easy Accordion Block is a free WordPress plugin that adds a native Accordion block to the Gutenberg block editor. Use it to build FAQ sections, product specifications, documentation, pricing pages, and any collapsible content — without shortcodes, without a page builder, and without writing a single line of code.

Because it is built entirely with Gutenberg’s own components, the controls feel exactly like the rest of the editor, and the output automatically matches your theme.

Installation#

  1. In your WordPress admin, go to Plugins → Add New.
  2. Search for Easy Accordion Block.
  3. Click Install Now, then Activate.

Manual installation#

  1. Download the plugin from wordpress.org.
  2. Upload the easy-accordion-block folder to /wp-content/plugins/ (or upload the ZIP via Plugins → Add New → Upload Plugin).
  3. Activate the plugin through the Plugins screen.

Requirements: WordPress 6.6 or higher, PHP 7.4 or higher. Works with block themes, classic themes, and hybrid themes.

After activation you are taken to the plugin’s dashboard page (find it anytime under Settings → Easy Accordion).

Requirements & compatibility#

Details
WordPress6.6 or later (tested up to 7.1)
PHP7.4 or later
ThemesBlock themes, classic themes and hybrid themes
Where it worksPosts, pages and any custom post type that uses the block editor, plus the Site Editor (templates, template parts and patterns), synced patterns and block widget areas
TranslationsTranslation ready. A .pot file ships in /languages, and translations from translate.wordpress.org load automatically
Right-to-left languagesRTL stylesheets are included and load automatically on RTL sites
Front-end scriptA small script that uses the jQuery library bundled with WordPress, loaded only on pages that contain an accordion

Updating#

The free plugin updates from Dashboard → Updates like any plugin from WordPress.org. Pro updates appear in the same place once your license is active (see Activating your license). Updates never change the content you have already saved: older accordions keep working and are upgraded to the latest markup the next time you edit and save the page.

Creating Your First Accordion#

  • Open any post or page in the editor.
  • Click the + (block inserter) and search for “Accordion”.
  • Click the Accordion block to insert it. You start with one accordion item.
  • Type your title in the heading area (e.g. “How do I reset my password?”).
  • Click inside the panel below the title and add your content — text, images, videos, buttons, lists, columns, or any other block.
  • Click the Add Accordion button at the bottom to add more items.
  • Click Save / Update and view the page. That’s it — no shortcode needed.

Tip: Each panel is a normal block canvas. To add a block inside a panel, click the + inside it or type / followed by the block name (for example /image).

Working with Accordion Items#

An accordion is made of items. Each item has two parts:

  • Header — the clickable title (the question, section name, etc.).
  • Panel (body) — the content that expands and collapses.

Adding items#

Click the Add Accordion button below the last item. There is no limit to how many items you can add.

Reordering items#

Select an item and use the up/down arrows in the block toolbar, or drag and drop it into place.

Duplicating and removing items#

Select the item, open the ⋮ (Options) menu in the block toolbar, and choose Duplicate or Delete.

Making an item open on page load#

Select an item, and in the sidebar under the Settings tab, turn on Make it active on Load. That item renders already expanded when the page loads.

Linking, disabling, and badges for a single item#

Select an item to access its own sidebar options — including turning the title into a link, adding a badge, or disabling the item entirely. These are covered in Pro Features for the Accordion Block.

Starting with a Premade Pattern#

Instead of building from scratch, you can start from a ready-made design.

  1. Insert the Accordion block. A placeholder appears with two buttons: Use Pattern and Skip.
  2. Click Use Pattern to open the Accordion Patterns library.
  3. Browse the designs, then click Insert on the one you like. The pattern is placed into your page and becomes a fully editable accordion.
  4. Make it yours — change titles, content, colours, and icons as usual.

The pattern library loads fresh designs from the plugin’s cloud. Use the Refresh button in the modal to fetch the latest patterns, and Load More to see additional pages. Some patterns are marked Pro.

Tip: Skipped the pattern picker? You can still rebuild from scratch — the placeholder only appears while the accordion is empty.

Accordion Behaviour Settings#

Select the main Accordion block and open the Settings tab in the right sidebar. These options control how the accordion behaves for visitors.

Open / close behaviour#

SettingWhat it does
Allow multiple items openON: visitors can expand several items at the same time. OFF (default): opening one item closes the other — classic accordion behaviour.
Allow all items to be closedON: visitors can collapse every item, so all panels can be shut at once. OFF: one item always stays open.

Activator (how panels open)#

Under the Activator panel, choose Select Type:

TypeAvailabilityBehaviour
ClickFree (default)Panels open when the header is clicked.
Hover ProPanels open when the visitor hovers over the header.
Autoplay ProPanels open automatically one after another, like a slideshow.

When Autoplay is selected, two extra options appear:

  • Speed — how long each item stays open before moving to the next.
  • Enable Infinite Loop — when on, the sequence restarts from the beginning after the last item.

Titles: Heading Tag, Heading Icon#

Under the Head panel in the block’s Settings tab:

Heading Tag#

Choose the HTML tag for accordion titles: H1, H2, H3, H4, H5, H6, Div, P, or Span (default: P).

This matters for SEO. On an FAQ page, for example, each question is usually an H2 or H3. Pick the level that fits your page structure.

Heading Icon#

Turn on Enable Heading Icon to place a small icon in front of every accordion title (for example, a question mark on an FAQ page).

Then, for each item: select it, and in its sidebar pick the icon you want from the icon library. You can also set the icon’s Size and Gap (space between the icon and the title) per accordion under the Heading Icon style panel.

Accordion Icons#

Every accordion header shows a small icon that indicates open/closed state — by default a circled plus (⊕) when closed and a circled minus (⊖) when open.

In the block sidebar:

Choose the icons#

  1. Open the Icons panel.
  2. Choose Active (shown when the item is open) or Inactive (shown when closed).
  3. Click the icon field to open a library of 130+ built-in SVG icons — chevrons, plus/minus, arrows, carets, and more.
  4. Pick a different icon for each state if you like, or leave one empty to remove it.

Icon position#

Toggle Change Icon Position to move the icon from the right side of the header (default) to the left.

Icon styling#

Under the Icons panel in the Style tab:

  • Size — icon size, with separate values for desktop, tablet, and mobile.
  • Icon Text Gap — space between the icon and the title text.
  • Color — separate colours for the normal, active (open), and hover states.

Styling Your Accordion#

Select the main Accordion block and open the Style tab in the sidebar. Every control here supports the theme colour palette (so your site’s colours stay consistent) and has a reset button.

New to the Style tab? Two concepts are used everywhere:

  • Responsive controls — most values have a desktop / tablet / mobile switcher, so you can set different spacing and sizes per device.
  • State switcher — many sections have a Normal / Active / Hover switcher, so you can style the resting, open, and hovered looks independently.

Container#

Controls the whole accordion group.

  • Items Gap — vertical space between accordion items (responsive).
  • Margin — outer margin around the entire accordion (responsive, each side adjustable, with a link option to set all sides at once).

Item#

Controls each accordion item box.

  • Border — width, style (solid, dashed, dotted…), and colour, per side or linked (responsive).
  • Border Radius — round the corners of the item (responsive).
  • Enable Box Shadow — pick a preset shadow from the Palette, or build a Custom Shadow (colour, blur, spread, offset).
  • Active / Hover — switch the state switcher to set a different border colour for the open item and when a visitor hovers over it.

Controls the clickable header bar.

  • Border, Border Radius, Padding — all responsive.
  • Background — under the Normal/Active/Hover switcher, set the header’s background colour for each state. (For example: white normally, soft green when open.)

Heading Text#

Controls the title text.

  • Typography — font family (including Google Fonts), weight, size, line height, letter spacing, text transform, and decoration. Size is responsive.
  • Color — separate text colours for normal, active, and hover states.

Body#

Controls the expanding panel.

  • Border — acts as the separator line between header and content; set width, style, and colour (responsive).
  • Border Radius, Padding, Margin — all responsive.
  • Background — panel background colour; switch to Active to also set a border colour and background for the open state.

Advanced#

  • Z-Index — controls the stacking order of the accordion, useful when other elements overlap it.

Native block settings#

The block supports Gutenberg’s built-in HTML anchor (ID) and additional CSS class(es) — find them under Advanced in the block toolbar, exactly like core blocks.

Nested Accordions#

You can place an accordion inside another accordion’s panel — perfect for multi-level FAQs or documentation with categories and sub-questions.

  1. Click inside a panel, type /accordion, and insert another Accordion block.
  2. Build the inner accordion as usual.

Separate styling for the nested level: select the outer accordion, and in the Style tab turn on Style as Nested Accordion. You can then override the styles so inner accordions look different from the top level — for example, smaller titles or lighter borders.

Building an FAQ Section (Step-by-Step Recipe)#

  1. Create a page (e.g. “Frequently Asked Questions”) and add a heading.
  2. Insert the Accordion block.
  3. Add one item per question — the question is the header, the answer goes in the panel. Use Add Accordion until all questions are in.
  4. Set the heading tag to H2 or H3 in the Head panel so questions are properly structured for search engines.
  5. Optionally enable Heading Icons (a question mark works nicely) and set the icon position to the left.
  6. Style it: give the header a background colour, set an active background so the open question stands out, and adjust padding and gaps to taste.
  7. Choose behaviour: allow multiple items open if readers compare answers, or keep one-at-a-time for focus.
  8. Save and preview.

Want a purpose-built FAQ experience — Q&A editor, Google rich results, search, and Q/A labels? The Pro FAQs block is built exactly for this. Prefer the free accordion? Pro also adds FAQ Schema to this exact setup with one toggle.

Two Pro switches turn an ordinary accordion into a search-friendly FAQ: FAQ schema describes your questions to search engines, and deep linking gives every answer its own shareable link. Both are set per accordion, in the block’s own sidebar.

How FAQ schema is built#

  • Select the Accordion block and turn on Enable FAQ schema in the SEO / FAQ Schema panel. Nothing else is needed.
  • Each item becomes a question: the item title is the question, and everything inside its panel is the answer (as plain text, up to 4,000 characters).
  • Items with an empty title are skipped, and the same question is only counted once, even if it appears in more than one accordion.
  • Items inside a nested accordion are included when the outer accordion has FAQ schema on.
  • All accordions with the switch on are combined into one FAQPage block of JSON-LD, printed at the end of the page.
  • The schema is added while the page is displayed, so you can turn the switch on or off at any time without changing or re-saving your content.

The FAQs block works the same way, except its schema is always on.

Testing your FAQ schema#

  • Paste the page URL into Google’s Rich Results Test or the Schema Markup Validator. You should see one FAQ item listing your questions.
  • Or view the page source and search for esab-faq-schema, the class on the script tag the plugin adds.
  • Testing a page that is not public yet? Paste its HTML into the tool’s code tab instead of the URL.

Note: Since August 2023 Google shows FAQ rich results mainly for well-known government and health websites. The markup is still valid on every site, and it still helps search engines and AI assistants understand your questions and answers, but a rich result in Google is not guaranteed.

Avoiding duplicate schema#

A page should carry one FAQPage. If your SEO plugin already adds FAQ schema for the same questions, or you mark up the same questions in both an Accordion and a FAQs block, keep only one. To switch the plugin’s output off everywhere, for example while an SEO plugin handles it, add:

add_filter( 'esab_faq_schema_enabled', '__return_false' );
  • Select the Accordion block and turn on Enable deep linking in the Deep Linking panel.
  • Each item gets an anchor made from its title: lowercase, words joined with hyphens, up to 60 characters. “How do I reset my password?” becomes how-do-i-reset-my-password.
  • Select an item to see its anchor in the sidebar under Deep-link anchor. Anchors are unique on the page; if two items share a title, the second one gets -2, and so on.
  • Link to an item with the page URL followed by # and the anchor, for example https://example.com/faq/#how-do-i-reset-my-password. Links inside the same page work too, for example <a href="#how-do-i-reset-my-password">.
  • When the page opens, that item expands, along with any accordion it is nested in, and the page scrolls to it. Following an in-page link also moves keyboard focus to the item’s header.

Tip: The anchor follows the title. If you rename an item, its anchor changes, so update any links you have shared, or keep the title the same.

Easy Accordion Block Pro — Overview & Setup#

Easy Accordion Block Pro is the paid add-on that builds on the free plugin. It is not a separate page builder — it plugs directly into everything described above and adds power features on top.

What Pro adds#

  1. Unlocks every Pro setting inside the Accordion block — badges, load more, instant search, open/close-all buttons, hover & autoplay activators, subheadings, item links, item disabling, custom icons, FAQ schema, and deep linking (all covered in the next section).
  2. Two dedicated blocks, found in the same “Easy Accordion” category of the block inserter:
    • FAQs — a data-driven FAQ block with a simple question/answer editor and automatic Google FAQ schema.
    • Unfold — folds long content behind a Show More / Show Less button.
  3. Safe SVG uploads — Pro enables uploading SVG files to the Media Library (validated and sanitized), so you can use your own icons anywhere the plugin picks icons.

Installing Pro#

  1. Purchase a license at accordion.gutenbergkits.com/pricing and download the Pro ZIP file.
  2. The free plugin must be installed and active — Pro requires it and adds itself on top.
  3. In your WordPress admin, go to Plugins → Add New → Upload Plugin, choose the Pro ZIP, install, then click Activate.

Activating your license#

After activation you are taken straight to the License tab (also reachable via Settings → Easy Accordion → License). Paste the license key from your purchase email and activate it. An active license enables automatic one-click updates for the Pro plugin — you’ll see update notices in Dashboard → Updates and Plugins, just like any wordpress.org plugin.

Pro Features for the Accordion Block#

With Pro active, the upgrade notices disappear from the block sidebar and every toggle below becomes available inside the free Accordion block.

Badge for Accordion Items Pro#

Add a small label (e.g. “New”, “50% OFF”) to any item.

  • Turn on Badge for Accordion Item in the block’s Settings tab, then choose the badge’s Vertical Position (top / center / bottom) and Horizontal Position (left / right).
  • Select an item and enter its Badge Text in the Badge panel (leave the text empty to hide that item’s badge).
  • Style badges in the item’s Style tab: typography, gap, border, radius, padding, text colour, and background.

Load More Pro#

Show long lists in batches instead of all at once.

  • Turn on Enable Load More. Configure: the button Text, how many items are Initially Visible, the Loading Type (All reveals everything on one click; Step reveals a set number each click via Load Per Click).
  • Style the button in the Load More style panel (typography, border, radius, padding, margin, colours).
  • Note: Load More does not apply to nested accordions, and is hidden while Autoplay is active.

Lets visitors filter a long FAQ list as they type.

  • Turn on Enable Instant Search, then set the search field’s Placeholder text and the Not Found Text shown when nothing matches.
  • If both search and Open/Close All buttons are enabled: Search and Buttons in same line puts them on one row, and Reverse position swaps their order.
  • Style the search box in its style panel (colours, border, radius, padding, margin).

Open All / Close All Buttons Pro#

Two buttons that expand or collapse the entire set in one click.

  • Turn on Enable Open/Close All Button. Set each button’s Text and Icon under the Open/Close All Button settings panel.
  • Style them in the style tab: shared Gap, Icon Gap, Alignment (left / center / right) and Margin, plus dedicated typography, border, radius, padding, and colour panels for the Open All and Close All buttons individually (including hover colours).

Hover & Autoplay Activators Pro#

See Activator. In short: Hover opens panels on mouse-over; Autoplay cycles through items automatically with adjustable Speed and optional Infinite Loop.

Subheadings Pro#

Add supporting text under any accordion title — great for a short answer preview under the question.

  • Turn on Enable Subheading in the Head panel. Choose the Subheading Tag (H1–H6, Div, P, Span) and Visible On: Always, or Active (only when the item is open).
  • Write the subheading text inside each item (supports bold, italic, and links).
  • Style it under Subheading Text: typography, margin (responsive), and colour per state.

Turn any item header into a link.

  • Select an item and turn on Enable link. Choose the Wrapper — Only Text (title is the link), Whole Head (entire bar is the link), or Additional Icon (a separate icon becomes the link).
  • Set the URL with the link control (supports open in new tab, nofollow, and sponsored).
  • For the icon type, pick a Link Icon and style its size, gap, and normal/hover/active colours.

Disable Specific Items Pro#

Lock an item so it cannot be opened on the front end — useful for “coming soon” entries or titles that only display information. Select the item and turn on Disable this accordion.

Custom Icons Pro#

Upload your own SVG or image (PNG, JPG, GIF, WebP) instead of using the built-in set, for the toggle icons, heading icons, and link icons. Pro adds safe, sanitized SVG upload support to the Media Library — upload your icon once, then pick it from any icon picker in the plugin.

FAQ Schema & Deep Linking Pro#

Both live in the block sidebar so each accordion can opt in separately.

  • FAQ Schema — under the SEO / FAQ Schema panel, turn on Enable FAQ schema. The plugin outputs valid FAQPage JSON-LD for that accordion, making your questions eligible for Google rich results.
  • Deep Linking — under the Deep Linking panel, turn on Enable deep linking. Every item gets a shareable anchor (shown per item as #your-question). When someone opens a URL ending in that anchor, the item expands automatically and the page scrolls to it.

Unfold Block Pro#

A separate block that folds long content behind a Show More / Show Less button — see The Unfold Block for the full guide.

The FAQs Block Pro#

The FAQs block is a purpose-built FAQ section with Google rich results in mind. It works differently from the Accordion block: instead of nesting blocks inside panels, you type questions and answers into simple fields, and the block renders the whole FAQ for you. That simplicity is what makes the automatic schema possible.

Creating an FAQ section#

  1. In the block inserter, search for “FAQs” and insert the block (it lives in the same “Easy Accordion” category). It starts with two sample Q&As.
  2. Select the block and open the FAQs panel in the sidebar. Each item has a Question field and an Answer box — type over the samples.
  3. Click Add Accordion for each new Q&A pair. Reorder pairs by dragging, or delete one with the trash icon on its header.
  4. Save and view. Your FAQ renders exactly like a styled accordion.

Note: Questions and answers are plain text (each item is one question with one answer). If you need images, buttons, or multiple blocks inside an answer, use the regular Accordion block with FAQ Schema instead.

Automatic FAQ schema#

No toggle needed — every FAQs block automatically outputs valid FAQPage JSON-LD for all completed Q&A pairs, server-side. That makes your questions eligible for Google rich results with zero extra work. (Items with an empty question or answer are skipped.)

Q/A Prefix#

Turn on Enable QA Prefix to show a small letter badge before each question and answer — “Q” for questions and “A” for answers by default. Both labels are customizable in the QA Prefix panel, and the badges are fully styleable: typography, gap, border, radius, padding, and separate colours for the question and answer badges.

Question tag#

Under the Question panel, pick the HTML tag for questions (H1–H6, Div, P, Span) — H2 or H3 is the usual SEO-friendly choice.

Behaviour & extras#

The FAQs block includes the same Pro behaviour set as the Accordion block:

  • Allow multiple items open / Allow all items to be closed.
  • Activator — Click, Hover, or Autoplay (with Speed and Infinite Loop).
  • Load More — reveal long FAQ lists in batches (All or Step mode).
  • Instant Search — filter questions as visitors type. Defaults: placeholder “Search…”, not-found text “No accordions found” — both editable.
  • Open/Close All Buttons — with the same inline and reverse layout options when combined with search.
  • Icons — same 130+ icon library, active/inactive icons, position, size, gap, and per-state colours.

Styling#

The Style tab mirrors the Accordion block, renamed to match the block’s parts:

  • Container — Items Gap and Margin.
  • Item — border, radius, box shadow, and active/hover border colours.
  • Question — typography, border, radius, padding, and text/background colours per state.
  • Icons — size, gap, and colours per state.
  • Answer — typography, separator border, radius, padding, margin, and background per state.
  • QA Prefix, Open/Close All, Load More, and Instant Search panels appear once those features are enabled.

Like every other block in the family, the FAQs block supports Gutenberg’s native HTML anchor and additional CSS class(es), plus a Z-Index control under Advanced.

The Unfold Block Pro#

The Unfold block takes any long content — a long answer, legal text, release notes, a biography — and folds it behind a Show More / Show Less button, so it doesn’t dominate the page.

Using it#

  1. In the block inserter, search for “Unfold” and insert the block.
  2. Add any content inside — paragraphs, lists, images, any block.
  3. Set how much content stays visible before folding:
SettingWhat it does
Content HeightThe visible height (in pixels) before the fold appears. Default 150; range 2–1000.
Expand LabelButton text to reveal the content. Default “Show More”.
Colapse LabelButton text to fold it back. Default “Show Less”.

Button icon#

Turn on Show Button Icon to add an icon to the button:

  • Icon Position — left or right of the label.
  • Show More Icon / Show Less Icon — separate icons per state (defaults: plus and minus), picked from the same icon library.

Styling the button#

Under the Style tab:

  • Typography — font family, weight, size, and more.
  • Alignment — left, center, or right.
  • Border, Border Radius, Padding, Margin — all responsive.
  • Colors — text and background colours for the normal and hover states.

The Plugin Dashboard#

Find it in your WordPress admin under Settings → Easy Accordion. It has three tabs:

Dashboard#

A getting-started overview: setup checklist (install → add your first block → try a pattern → watch the tutorial), system report (plugin version, WordPress, PHP, theme, memory limit, block editor status), and helpful links.

Settings#

Site-wide feature toggles. Changes save automatically and never affect published content.

  • Enhanced keyboard navigation (on by default) — arrow-key / Home / End movement between headers with a visible focus ring, following the WAI-ARIA Accordion pattern. Screen-reader labelling stays active whether this is on or off.

Help & Support#

Documentation, support links, and ways to contact the team.

License (Pro only)#

Appears when Easy Accordion Block Pro is active. Paste your license key here and activate it to enable automatic Pro updates. See Activating your license.

Accessibility#

Accessibility is a core feature, not an afterthought. Accordions built with this plugin:

  • Expose the correct ARIA state (aria-expanded, aria-controls) and label their panels as labelled regions.
  • Are fully keyboard operable: Enter or Space toggles a panel, Up/Down arrows move between headers, and Home/End jump to the first or last header.
  • Generate unique, non-colliding IDs even with several accordions on the same page, so screen readers announce the right panels.
  • Respect the visitor’s reduced motion preference — animations are skipped when the OS asks for less motion.
  • Keep panel content readable without JavaScript (nothing is ever hidden from visitors or search crawlers), and every panel expands automatically when the page is printed.

Keyboard support#

KeyWhat it does
Tab / Shift + TabMoves to the next or previous accordion header, then into the open panel
Enter or SpaceOpens or closes the focused item
↓ / ↑Moves to the next or previous header in the same accordion
Home / EndJumps to the first or last header

Tip: Choose a Heading Tag that fits the page outline, usually H2 or H3 for an FAQ under a section heading. Screen reader users often move through a page by its headings.

Performance & Privacy#

  • Conditional loading — CSS and JavaScript are enqueued only on pages that actually contain an accordion. Pages without the block load nothing extra.
  • Dynamic styles are minified — generated CSS is compact and output efficiently.
  • Google Fonts on demand — fonts are requested only when you pick one in the Typography control, and only in the weights you actually use. Prefer not to load remote fonts at all? See For Developers.

Front-end script and caching#

  • The front-end script is small and uses the jQuery library that ships with WordPress. Like the styles, it loads only on pages that contain an accordion. Many themes and plugins already load jQuery, in which case nothing extra is downloaded.
  • Each accordion’s styles are generated from its settings and printed once, minified, so there is no separate stylesheet per accordion.
  • Caching, minify and CDN plugins work as usual. If you use a “delay JavaScript” or “defer JavaScript” option and accordions do not open until the page is scrolled or clicked, exclude jquery and the plugin’s view.js from delaying.

For Developers#

A few hooks for custom integrations:

Disable remote Google Fonts#

For GDPR-sensitive sites or fully self-hosted font setups:

// functions.php or a plugin
add_filter( 'esab_disable_google_fonts', '__return_true' );

This also corresponds to a stored setting, so it can be toggled programmatically via the plugin’s settings.

add_filter( 'esab_admin_links', function ( $links ) {
    $links['docs'] = 'https://example.com/my-docs/';
    return $links;
} );

Block names#

  • Accordion (parent): esab/accordion
  • Accordion item: esab/accordion-child (only allowed inside the parent)
  • FAQs (Pro): esab/faqs
  • Unfold (Pro): esab/unfold

Hooks reference#

HookTypeUse it to
esab_disable_google_fontsFilterReturn true to stop loading Google Fonts
esab_faq_schema_enabledFilterReturn false to switch off the FAQPage JSON-LD on a page or the whole site
esab_admin_linksFilterChange the links on the plugin dashboard (docs, support and so on)
esab_render_blockActionRun code when an accordion is displayed. Receives the parsed $block
esab_admin_before_bodyActionAdd content above a dashboard tab. Receives the tab slug
esab_license_tabActionOutput the content of the License tab (used by Pro)

For example, to turn the FAQ schema off on one page only:

add_filter( 'esab_faq_schema_enabled', function ( $enabled ) {
    return is_page( 'faq' ) ? false : $enabled;
} );

Front-end markup and CSS classes#

ClassElement
.wp-block-esab-accordionThe accordion. Also has a unique class such as .esab-abc123 and .nested-accordion when nested
.wp-block-esab-accordion-childOne item
.esab__active_accordionAdded to an item while it is open
.esab__headThe clickable header (a real button)
.esab__heading_tagThe title text
.esab__iconThe open / close icon
.esab__bodyThe panel holding the item’s blocks
.esab__badge, .esab__subheading_tagBadge and subheading (Pro)

Adding your own CSS#

Every setting has a control in the sidebar, but you can also style accordions with CSS: in Appearance → Editor → Styles → Additional CSS, the Customizer, or your theme. Give the block a class under Advanced → Additional CSS class(es) to style one accordion only:

.my-faq .esab__active_accordion {
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25);
}

.my-faq .esab__heading_tag {
    letter-spacing: -0.01em;
}

Notes#

  • Settings live in a single option, esab_settings. Toggling dashboard settings never changes saved block markup.
  • The plugin creates a dedicated block category (“Easy Accordion”) in the inserter.
  • Pro detection is via the Esabp_Accordion_Block_Pro class; UI gates check this before showing Pro controls.

Troubleshooting & FAQ#

How do I add an accordion to a page? Edit the page, click +, search “Accordion”, insert the block. Type the heading, drop any blocks inside the panel. No shortcode.

Can I put images, videos, or other blocks inside a panel? Yes — each panel is a normal canvas. Add images, videos, buttons, columns, forms, or any block.

Can several items be open at once? Yes — enable Allow multiple items open in the block’s Settings tab.

Can an item be open when the page loads? Yes — select the item and turn on Make it active on Load.

Does it support nested accordions? Yes. Insert an accordion inside a panel, and optionally enable Style as Nested Accordion to style the inner level separately.

Will it slow my site down? No — assets load only on pages that contain the block.

Does it work with my theme? Yes — block, classic, and hybrid themes. Colour pickers also include your theme’s palette.

Is it accessible? Yes — correct ARIA roles, full keyboard support (Enter, Space, Up, Down, Home, End), reduced-motion support, and readable content without JavaScript.

What about printing? All panels expand automatically when the page is printed, and interactive controls are hidden.

How many items and icons are included? Unlimited items; 130+ built-in SVG icons (Pro adds custom icon uploads).

Does the free version add FAQ schema? No — FAQPage structured data is part of Pro, in two ways: the dedicated FAQs block outputs it automatically for every completed Q&A, and any Accordion block gets an Enable FAQ schema toggle under its SEO / FAQ Schema panel.

Do I need the free plugin for Pro to work? Yes — Pro is an add-on that requires the free Easy Accordion Block plugin to be installed and active.

How do I get updates for the Pro plugin? Activate your license under Settings → Easy Accordion → License. Updates then appear in Dashboard → Updates, just like wordpress.org plugins.

Where do I find the FAQs and Unfold blocks? In the block inserter, under the same “Easy Accordion” category as the Accordion block — they appear once Pro is active.

Common problems and fixes#

The editor says “This block contains unexpected or invalid content”. This can appear on accordions saved with a much older version. Click Attempt Block Recovery; your content is kept and the block is saved in the current format.

Accordions do not open on the live site. Usually a performance plugin is delaying JavaScript. Exclude jquery and the plugin’s view.js from “delay” or “defer” options (see Front-end script and caching), then clear the cache.

A deep link does not open its item. Check that Enable deep linking is on for that accordion, and that the part after # matches the item’s Deep-link anchor exactly. If you renamed the item, its anchor changed.

My FAQ does not show as a rich result in Google. Test the page as described in Testing your FAQ schema. If the test shows a valid FAQ, the markup is working; Google now shows FAQ rich results mainly for government and health websites.

Style changes do not appear on the live site. Clear your caching plugin, CDN and browser cache. Each accordion’s styles are printed with the page, so a cached page shows the old styles until it is refreshed.

Pro controls are still locked after installing Pro. Make sure both the free plugin and Pro are active and up to date, then check the license under Settings → Easy Accordion → License.

Still stuck? Visit the support forum or open a support ticket.

Still stuck?

We usually reply within a day.