Dynamic Accordion Plugin Documentation

Dynamic Accordion Documentation

Dynamic Accordion Structure

An accordion is made up of a primary accordion block along with several sub-blocks known as accordion items.
Within each accordion item, you can incorporate Gutenberg blocks.
The accordion block is capable of displaying a title, simple text, and various types of Gutenberg blocks, including text, images, and more.
Additionally, each accordion item can be connected to (already built-in) custom fields that are primarily text-based, including options for rich text.
It can also integrate with a wide range of custom fields from providers such as ACF, SCF, ACPT, Meta Box, or Modern Fields.

Supported custom field types

For the title

Text, text-area, rich text

For the content section

Text, text-area, rich text, WYSIWYG (editor), shortcode, image field, table, most forms.

Not supported field types

Gallery, column, group, accordion in accordion.

Design

Dynamic Accordion features a Styles system
You can use 5 built-in styles immediately upon setup.
You can customize each style in Settings and Defaults Styles.

Each main accordion block has a stylepicker
Although the default style is defined on the Settings page, the user can at any time change the style of the accordions independently.
Don’t forget: after switching styles, the values set in the block editor take precedence over the preset styles. Every so often you may need to remove the adjustments you set.
If the site is using cache, it is typically necessary to empty the cache to see the changes.
The accordion block also has a sixth option: custom. Custom inherits the set default style only once and unlocks the accordion after that: you are free to style any way you want, without risk that the Settings page or Defaults will overwrite anything.

Local design takes precedence

Local design settings take precedence over design defaults. If you modify a default style on the Settings page, it only affects existing accordions that have not been assigned a specific value in the block design fields settings.

Site-wide design style

In Settings / Design Defaults, a site-wide design style is always active: every new accordion automatically receives that design.
Each of the 5 styles has a Reset Style x to defaults button. Ideal if you no longer remember what the original design was and you want to return to the default.

Theme adjustments for bottom padding

Padding is not displayed identically on every theme and with every font. A few pixels in left or right padding usually go unnoticed. However, if the bottom padding visually differs from the top padding, the text appears too low. This is not due to the design default settings or the user but is theme- and font-dependent. Therefore, the Dynamic Accordion block plugin has a Theme Adjustments value on the Settings page, under the Design Defaults tab. This is independent of the 5 presets and is automatically site-wide. Tip: Many FSE themes require 2 or 3 extra pixels for bottom padding.

Reset overrides on existing accordions (button)

Removes saved block design values from all accordion blocks so they inherit the design defaults of their locked style. Accordion block settings such as initial state, icon, and FAQ schema are not changed.
Note: This function intentionally skips accordions with the Custom style setting. If you need to reset those accordions as well, you have to set a style first, save the page and then activate the reset.

Apply site-wide style to existing accordions (button)

Point every accordion block on the site at one design preset (Style 1–5). This only changes which preset each block uses. It does not edit preset colors or borders — use the Style preset tabs and Save for that.
Before you click the button below:
Under “Site-wide design style” above, select the radio for the style you want (e.g. Style 2). Do not rely on the Style preset tabs — those tabs only edit preset values; they do not choose which style is applied to accordions.
Click Save on the design defaults form above. The bulk action uses the saved radio selection, not an unsaved choice.
Per-block design overrides are kept; only the locked style reference on each accordion changes.
Note: This function intentionally skips accordions with the Custom style setting. If you need to reset those accordions as well, you have to set a style first, save the page and then activate the button.

Editor restrictions

Dynamic accordion has a setting for user restrictions.

This is particularly useful if you are creating a site for clients and you are the admin, or if there is a person within a company who updates the website but is not a real web designer. Editor restrictions are truly ideal, especially if the website uses templates. With ‘Restrict block sidebar’ checked, this is the situation:

Non-administrators can still see

Non-administrators can still:
Change the initial open state (Accordion settings)
Edit the FAQ subject / title when the FAQ schema was already enabled by an administrator
Edit item titles directly in the accordion bar (inline in the canvas)
Add and edit blocks in each accordion item content area
Add, remove, and reorder accordion items
Use the site-wide design from Settings → Design defaults (they cannot set block-level design overrides in the sidebar)

Hidden for non-administrators:

Hidden in sidebar

Title
Anchor link
Title meta key
Content meta key
Title heading and weight
Font sizes,
Rounded corners
Title and content colors (normal, hover, and active)
Item border colors (normal, hover, and active)
Border thickness (normal and active),
Title padding

Still allowed

Edit inner content (paragraphs, etc.)
Add text, blocks, remove, and reorder items
Remove/move the accordion block itself
Inline title editing in the accordion bar remains available.
Text alignment
Icon
Space between items
Maximum width
FAQ schema (JSON-LD) toggle

WooCommerce

Dynamic Accordions has an option to activate access to WooCommerce fields within the accordions.
Settings / Custom fields / Dynamic post fields.
As soon as you activate that option and WooCommerce is active, product fields such as price, SKU, short description, and long description are available for use.

Dynamic post fields

Dynamic Accordions has an option to activate access to Dynamic post fields within the accordions. It’s the same activation as for the WooCommerce fields.
Settings / Custom fields / Dynamic post fields.
As soon as you activate that option, it adds native post fields (title, author, excerpt, date, content) to the Custom field keys dropdown in the block sidebar.

Using our custom custom fields

We offer built-in accordion fields. There is no automatic mapping: connect each accordion item to a field using the Title meta key and Content meta key settings in the block sidebar.
Settings / Custom fields / Built-in fields
Activate this setting and set the required accordion pairs. Each pair creates one title field and one content field. You can increase this later without losing existing values. Lowering the number hides extra fields but keeps stored data. Maximum: 30.
You have to set the post type the fields are shown on. That can be any post type, including custom post types.

Field naming

Meta keys use the da_ prefix and numbered accordion names, for example:
da_accordion_title_1 — Accordion title 1
da_accordion_content_1 — Accordion content 1 (rich text, shortcode allowed)

Migration of accordions

Migration of accordions is important; most migration tools can not import or migrate the accordions. The design sometimes, but never the content.
We provide information and a complete migration file for your AI agent.
Settings / Custom fields / Guide tab
Our plugin contains a migration.md file that contains a complete setup your AI agent can use to migrate and mp the existing accordions to our accordions.

CSS variables

You can target almost all the elements / classes of Dynamic Accordion.
You can use custom CSS for transitions, effects, and styling beyond our standard settings.
Settings / Custom fields / Guide tab
You’ll find all the information you need, including a complete list of .classes.
Also included are examples of CSS for effects like Smooth transitions, Open highlight and Fade-in.
It explains how to target all the accordions, or just certain pages or accordion IDs.

Using the accordion block in a query

Because Dynamic Accordion works with custom fields, it can also be used inside a Query Loop with custom post types.
Simply add a Dynamic Accordion block with a single item inside your query card, then connect the title and content fields to custom fields.
Each time a new custom post is created, an accordion item is automatically generated based on its field values.

FAQ schema

Most websites require a good WordPress FAQ accordion. With our plugin you can even create a dynamic FAQ block.
Although the FAQ schema is no longer shown as a rich result in Google Search, search engines like Google and Bing—and AI systems in general—still use it as a structured source of information.
The Dynamic Accordion block includes an option in the main settings panel to enable FAQ schema with a single click.
This advanced feature also allows you to define a title for the entire FAQ set, such as “Frequently Asked Questions” or “Questions about our lifetime plans.” If no title is provided, the page title is used automatically.
Only accordion items that are actually visible on the front end are included in the schema output. Each item must contain both a question (title) and an answer. The answer is converted to plain text for better readability. Empty items and entries that only contain images are automatically excluded from showing in the frontend.
Empty items and image-only answers are skipped.

Accessibility

Accessibility is fully implemented.
Each item uses <button type=”button” class=”…__trigger”> (not a <div> or plain text) and both aria-expanded and the aria-controls + panel id are included in the schema.

Anchor links

Each accordion item can also be assigned its own #anchor link. When a visitor clicks a text link or button pointing to that anchor, the page automatically scrolls to the corresponding accordion item, opens it, and reveals its content.

Deep linking with an anchor link

There is also deep linking: for example, if you assign the anchor prices to an accordion item, linking to yoursite.com/page#prices will automatically open that item and scroll it into view.

Icons for opening an closing the accordion

Dynamic Accordion offers three icon sets: arrow, +/-, and +/-. The icon type is independent of the chosen design (standard or your design) and can be changed at any time.
By default, an accordion also opens when you click on the title. You only open the accordion by clicking on the icon while editing (this is because the title text is directly editable).

Width (max)

The accordion block takes the space you allow, usually the page width, a group block or column; whichever is narrower.
Most users use the Dynamic Accordion block within a wrapper, like a column, section or container, and the accordion-items automatically adjust to the available space.
It also has a max. width field to allow for a manual maximum width setting.
If you need the accordions to all the space there is, just set a max. width like 2000 px.

Using Dynamic Accordions in a template

An FSE template or a template from a premium theme like Kadence, GenerateBlocks or Blocksy.
Place the block.
Create the maximum number of accordion-items the end-user might need.
Connect the title and content section to the custom fields.
Unused accordion items are automatically hidden.

Details about the priority of design settings

When creating an accordion, the accordion inherits its settings from the set default in plugin settings or the selected style in the block.
Each local design setting you add or change in the blocks design settings overrules the ‘inherit from default’. Even if you change the default settings for the exact style the accordion is set to, the local design setting rules.
Setting a local style, like rounded corners, to 0 doesn’t reactivate the inherit again. Only an empty field does.
Setting an accordion to style ‘Custom’ keeps the design it was set to but breaks the locked connection to the default design. So when the formerly set default design changes, the accordion set to custom does not change at all (it’s free).
When setting a custom accordion to a preset default again, for example custom to style 4, all local settings in the block will be overruled (reset).
Reset block overrides: removes saved block design values from accordion blocks that use Style 1–5 so they inherit the design defaults of their locked style again. Custom accordions are skipped.
Apply site-wide style to existing accordions: point every accordion block on the site at one design preset (Style 1–5). Custom accordions are skipped. This only changes which preset each block uses. It does not edit preset colors or borders — use the Style preset tabs and Save for that.
Note: Accordion block settings such as initial state, icon, and FAQ schema are never changed or overruled.

Saving after a bulk action

The plugin has a few actions and bulk actions. Is it always necessary to open or save after an action? It depends on what you changed. In general, bulk settings actions do not require opening and saving each page. Only manual edits in the editor require a normal WordPress save.

Action	Is saved where	Re-save posts?
Reset overrides / Set site-wide style (Settings buttons)	Directly in each post’s `post_content` in the database	No — already done
Design defaults (Settings → Save)	`wp_options`	No — affects inherit lookups immediately (cache flush may be needed on front)
Changes in block sidebar (editor)	Only in memory until post save	Yes — must Update/Save the page
Open post after bulk action	—	Don’t re-save unless you edit something — an accidental save won’t undo the bulk action, but unsaved editor tweaks would write to the post

Accordion-item titles

You can set the title of the items as h2, h3 or h4.
Prevent double titles (first heading in the accordion-item the same as the accordion title): it’s not good for SEO and it can annoy the visitor.
The title is included in the FAQ schema, if the FAQ schema is activated.
The title is sometimes not included in a table of content block because those blocks read the content as JSON in the database.
- Some advanced blocks, like ‘Kadence Table of Contents’, have a ‘Search for Headings in Non static post content’ toggle, but most don’t.
- If you need the title to show up, just place a title as the first block inevery accordion-item that’s not a 100% copy of the accordion title.

Known limitations

We test our plugins with multiple themes and cache plugins.
The Extendable theme is not compatible.
You can’t place an accordion in another accordion.

Get your Dynamic Accordion license

You are allowed to use the plugin on a maximum of websites, according to the purchased license.
Always deactivate a license on an unused website; otherwise the key slot remains occupied.
Dev and other domains count towards your installation limit; therefore, we are quite generous with the number of activations per license.
It’s a one-time payment; no yearly costs.
You can check your available slots at: https://server.wpinsight.eu/validate-key/

Installation

Upload the ‘Dynamic Accordion block’
If done manually upload plugin to /wp-content/plugins/
Activate the plugin through the Plugins menu in WordPress.
Change settings on the settings page.
Add the Dynamic Accordion block to a page.

Back to Dynamic Accordion plugin