The Blocksify Accordion block creates expandable panels with item titles, icons, indicators, and open-state styling. Use it for FAQ sections, grouped help content, or compact detail panels inside a Section block.
At a glance
| Parent block | blocksify/accordion |
| Child block | blocksify/accordion-item |
| Default insertion | Creates 3 Accordion Item children, with the first item as the default open item. |
| Open behavior | Multiple open by default, or single-expand when Multiple open is turned off. |
| Indicator options | Plus-minus, chevron, arrow, or none, with left or right placement. |
| Key supports | Title tag, title alignment, item title icons, indicator size and gap, item gap, title styling, title active styling, item styling, visibility, and advanced settings. |
Where to find it
- Open the block inserter and choose Blocksify → Accordion. The Accordion is added with Accordion Item children.
- Select the Accordion parent block to edit shared behavior, indicators, and title styling.
- Select an Accordion Item child to edit its title text, icon, HTML tag, anchor, or custom class.
When to use it
Use Accordion when several related answers or details should stay compact until a visitor opens them. It is a better fit than a long stack of text when each panel can stand on its own.
Use a Container block inside an item when the panel needs layout or spacing around mixed content. Use the Tabs block instead when visitors should switch between panels without vertical expansion.
Parent and item structure
Accordion is a locked parent-child pair. The parent wraps the list, and each Accordion Item renders its own header, body, title, optional icon, and panel content.
| Surface | What it owns |
| Accordion parent | Multiple-open behavior, default open item, title tag, title alignment, item gap, indicator type, indicator position, indicator size, header gap, and shared styling. |
| Accordion Item child | Item title, optional icon, item HTML tag, anchor, custom class, and the body content. |
| Item body | Any blocks placed inside the item, including text, media, buttons, layout blocks, or other Blocksify blocks. |
Open and close behavior
The parent has one Open Default value. It can be None or one of the current item titles, and it controls the initial open item in both the editor and frontend.
When Multiple open is on, the default item opens first and each item then tracks its own open state. When Multiple open is off, opening one item closes the others.
Frontend accessibility behavior
Each item header renders as a focusable control with role="button", tabindex="0", aria-expanded, and aria-controls. The panel body renders as a region tied back to the header with aria-labelledby. Any panel set to open by default is visible as soon as the page loads, before any script runs.
The body remains in the markup so the open and close transition can run, while aria-hidden reflects whether the panel is currently hidden. Keyboard handling supports Enter and Space on the header.
Titles, icons, and indicators
The parent controls the title tag and alignment for every item. The tag can be a heading level, div, span, or p, while title alignment can be left, center, right, or inherited.
Each Accordion Item can have its own title icon. The indicator is controlled on the parent, so the plus-minus, chevron, arrow, or no-indicator choice stays consistent across the set.
| Control | What it changes |
| Title Tag | The wrapper tag used for item titles. |
| Title Align | The title alignment class applied to the title element. |
| Indicator Icon | The shared indicator shape for all items. |
| Position | Places the indicator on the left or right side of the header. |
| Size | Adjusts the indicator size, or lets it inherit when unset. |
| Header Gap | Controls the space between icon, title, and indicator. |
Item icons use the same icon model as the Icon block, but they are edited from the Accordion Item toolbar or settings panel.
Style capabilities
A fresh Accordion uses a bordered-card baseline: a theme-adapted 1px item border, 8px radius, comfortable title and body padding, and a small gap between items.
| Style surface | What it controls |
| Title Style | The normal header area, including text color, background, image, gradient, border, radius, shadow, and padding. |
| Title Active Style | The open header state, including text color, background, image, gradient, and border. |
| Item Wrapper | The whole item box, including spacing-oriented padding and the seeded border and radius. |
| Item Active | The open item box state, including the stronger default active border. |
| Visibility | Hides the Accordion per device. |
| Advanced | HTML anchor and additional CSS classes. |
Responsive values inherit until changed on a smaller device, following the same editing model covered in responsive and hover editing.
Tips
- Keep item titles short enough to scan when several panels are closed.
- Use single-expand mode for FAQ lists where one answer should replace the previous one.
- Set the default open item deliberately, especially when the first answer is not the most important one.
- Use shared parent styling first, then select a child item only when its title or icon needs a unique setting.
- Check keyboard focus and open states before publishing a large FAQ section.