Brigade Blocks Docs v1.1.0

Interactive module

Accordion Item block

One collapsible section of an Accordion: a title and any blocks as content.

Overview

An Accordion Item is one section of an Accordion: a clickable title and a content area that can hold any blocks — paragraphs, images, buttons or even another Accordion for nested sections. It can only be used inside an Accordion.

At a glance

Block name
wpbb/accordion-item
Module
Interactive
Find it by searching
Accordion Item
Used inside
Accordion (it cannot be used on its own)
Loads JavaScript on the site
No

When and why to use it

  • One question and answer of an FAQ.
  • One detail section on a product page.

Example scenarios

  • FAQ: title “Can I cancel any time?”, content: a paragraph and a link to the terms.

How to add the Accordion Item block

  1. Add the parent block. The Accordion Item block only exists inside a Accordion block. Insert a Accordion first (search for “Accordion” in the block inserter); it already contains a few Accordion Item blocks with sample content.
  2. Add another Accordion Item. Select the Accordion and click the + button at the end of its items. A new, empty item is added.
  3. Select it. Click inside the Accordion Item — or pick it in the List View (the three-lines icon in the top toolbar) — to see its own settings in the sidebar.
  4. Edit the content. Type the title (“Question or section title”), then click the content area (“Add content…”) and type or add blocks. Use the icon at the end of the title to open or close the item in the editor.
  5. Reorder or remove. Use the up/down arrows in the block toolbar to move it, or the block menu (⋮) → Delete to remove it.
  6. Style it. Design settings for all items are made on the parent Accordion block, in its Styles tab, so every item stays consistent.
  7. Save or publish. Click Save draft, Preview or Publish / Update.

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)

Title

What it does
The clickable title of the section.
What to enter or choose
A question or a short section name. Bold and italic are allowed.
Default
Empty
How to use it
Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it
Always — items without a title are not shown on the site.
Example
“How long does delivery take?”
Result
Shown in the Title tag chosen on the Accordion.

Content

What it does
The content shown when the item is open.
What to enter or choose
Any blocks — paragraphs, lists, images, buttons, even another Brigade block.
How to use it
Click in the content area (it starts with “Add content…” or sample text) and type, or use the + to add blocks.
When to use it
Always.
Example
A paragraph and a Button.
Result
The blocks appear inside.

Settings panel: Item

Open by default

What it does
Shows this item open when the page loads.
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
For the most important answer. Use with care when “Only one open at a time” is on — with several items set to open, browsers keep only one open.
Example
On for “Shipping” on a product page.
Result
The item is open on load.

Design & styling

Accordion Items are styled all together on the parent Accordion (elements Item, Header, Title, Icon and Content), so every item looks the same. The item itself only offers the standard Additional CSS class(es) and HTML anchor in its Advanced section.

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.

This block adapts to the screen width on its own and has no per-device settings.

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.
  • This block cannot be turned into a synced pattern on its own; make a pattern from its parent block instead.

How it works on your site

A <details> element with a <summary> title. The HTML anchor lets you link directly to an item.

Accessibility

  • Keep titles unique and descriptive so screen-reader users can tell items apart.

Limitations and notes

  • Can only be used inside an Accordion.
  • Title formatting: bold and italic only.