Interactive module

Accordion block

Collapsible sections (FAQs, details, specifications) built on the browser’s native disclosure element — with optional FAQ schema for search engines.

Overview

The Accordion shows a list of titles that open to reveal their content when clicked. It is perfect for FAQs, product details or long content that visitors scan. Each section is an Accordion Item that can hold any blocks — even another Accordion.

It uses the browser’s built-in <details> element, so it works without any JavaScript, with the keyboard, and with the browser’s “Find in page”. It can also output FAQ structured data so Google can understand your questions and answers.

At a glance

Block name: wpbb/accordion
Module: Interactive
Find it by searching: Accordion
Contains: Accordion Item
Loads JavaScript on the site: No

When and why to use it

Frequently asked questions.
Product specifications, shipping and returns details.
Long guides where visitors only need one part.

Example scenarios

FAQ page: ten questions, “Only one open at a time” on, “Add FAQ schema” on.
Product page: a Lines-style accordion with “Details”, “Size guide” and “Shipping”, all closed at first.

See it in action

These are live examples: real Accordion blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Cards, Lines and Boxed — Click the titles to open and close items.

Open in a new tab

How to add the Accordion block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Accordion in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Accordion in the results. The block appears with three sample questions and answers.
Configure the content. Click a title to change the question, click the content below it to change the answer. To add another item, select the Accordion and click the + button at its end. Then open the Settings tab for the options below.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Items

What it does: The sections of the accordion (Accordion Item blocks).
What to enter or choose: Add items with the + button that appears at the end of the selected accordion.
How to use it: Select the Accordion and click + at the bottom; edit each item’s title and content directly.
When to use it: Always — an empty accordion is not shown.
Example: Three items: “Pricing”, “Delivery”, “Returns”.
Result: Each item becomes one collapsible section.
Good to know: In the editor, click the icon on the right of an item’s title to open or close it while you work. See Accordion Item.

Settings panel: Accordion

Style

What it does: The look of the items.
What to enter or choose: One of: Cards, Lines, Boxed.
Default: Cards
How to use it: Click one of the buttons in the group.
When to use it: Cards: separate rounded cards. Lines: a minimal list divided by lines. Boxed: all items joined in one bordered box.
Example: Lines for a product details list.
Result: The look changes instantly.

Icon

What it does: The open/close indicator.
What to enter or choose: One of: Plus, Chevron.
Default: Plus
How to use it: Click one of the buttons in the group.
When to use it: Plus (turns into a minus when open) or Chevron (an arrow that rotates).
Example: Chevron for a navigation-like look.
Result: The indicator changes.

Icon position

What it does: Which side of the title the indicator sits on.
What to enter or choose: One of: Left, Right.
Default: Right
How to use it: Click one of the buttons in the group.
Example: Left for long titles.
Result: The indicator moves.

Title tag

What it does: The HTML element used for every item title.
What to enter or choose: One of: H2, H3, H4, H5, H6, P.
Default: H3
How to use it: Open the dropdown and pick an option.
When to use it: Match your page structure: usually one level below the heading above the block (H3 under an H2).
Example: H3 under a section heading “Frequently asked questions” (H2).
Result: Only the structure changes; the look stays the same.

Settings panel: Behaviour

Only one open at a time

What it does: Opening an item closes the one that was open.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: On for FAQs and long lists, to keep the page short. Off when visitors may want to compare several answers.
Example: On for a 10-question FAQ.
Result: Only one item can be open. Works in modern browsers without JavaScript; older browsers simply allow several open items.

Open the first item

What it does: Shows the first item open when the page loads.
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: On to show visitors how the accordion works and give them an answer right away.
Example: Off for a compact product details list.
Result: The first item is open on load. Individual items can also be set to open with their own Open by default switch.

Add FAQ schema (SEO)

What it does: Adds FAQPage structured data (JSON-LD) built from the item titles (questions) and contents (answers).
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: On for real question-and-answer content. Use it on only one accordion per page.
Example: On for your FAQ page.
Result: Nothing changes visually; search engines can read the questions and answers.
Good to know: Items without a title or content are skipped. Answers keep only simple formatting (paragraphs, bold, italic, lists and links).

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Accordion offers.

Element: Item selected first

Each item box — background, border, corners, shadow and space between items. Hover and Active (Active = the item is open) states.

Styles-tab controls for “Item”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover, Active
	Color / Gradient	—	Normal, Hover, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Active
	Border	—	Normal, Hover, Active
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover, Active
Box Shadow	Shadow layers	—	Normal, Hover, Active
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Active — Applies to open items.

Element: Block

The whole accordion.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Header

The clickable title row. Hover and Active (open) states.

Styles-tab controls for “Header”
Panel	Control	Per device	Available in states
Background	Type	—	Normal, Hover, Active
	Color / Gradient	—	Normal, Hover, Active
	Image	—	Normal
Spacing	Padding	Yes	Normal

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Active — Applies while the item is open.

Element: Title

The title text. Hover and Active (open) states.

Styles-tab controls for “Title”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Active
Colors	Text	—	Normal, Hover, Active

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.
Active — Applies while the item is open — e.g. make the open question coral.

Element: Icon

The plus/chevron indicator. Hover and Active (open) states.

Styles-tab controls for “Icon”
Panel	Control	Per device	Available in states
Colors	Text	—	Normal, Hover, Active
Background	Type	—	Normal, Hover, Active
	Color / Gradient	—	Normal, Hover, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Active
	Border	—	Normal, Hover, Active
	Radius	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal

States for this part:

Hover — When the mouse pointer is over the whole block — so this part changes as soon as visitors point at the block.
Active — Applies while the item is open.

Element: Content

The content area that opens.

Styles-tab controls for “Content”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Spacing	Padding	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Margin, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, when your theme supports them.

How it works on your site

Each item is a native <details>/<summary> element. No JavaScript is loaded. With FAQ schema on, one <script type="application/ld+json"> is added after the accordion.

Accessibility

Keyboard: Tab to a title, press Enter or Space to open or close it.
Screen readers announce each title as expanded or collapsed.
Browser “Find in page” opens closed items that contain the searched text (in supporting browsers).
Choose a Title tag that fits the heading order of the page.

Tips and best practices

Write titles as the questions visitors actually ask.
Keep the answers short; link to a full page for details.
Style the open item (State: Active) so visitors see where they are.

Limitations and notes

FAQ schema should only be used once per page, and only for genuine FAQs (Google’s guidelines).
Items with an empty title are not shown on the site.

Troubleshooting

Several items open at the same time even though “Only one open” is on.

That browser does not support exclusive <details> groups yet (it is supported in current Chrome, Edge, Safari and Firefox). The accordion still works — items just open independently.

An item is missing on the site.

Give it a title. Items with an empty title are not output.