The Accordion block creates expandable/collapsible content sections—perfect for FAQs, documentation, and organizing information that doesn’t need to be visible all at once.
Why Use Accordion?
Organize Long Content: Break up lengthy pages into digestible sections users can explore at their own pace.
Reduce Visual Clutter: Show only what’s relevant, keeping pages clean while making all content accessible.
Improve User Experience: Let users find answers quickly without scrolling through content they don’t need.
Adding an Accordion Block
Edit a page or create a new one
Click + to add a block
Search for “Accordion”
Insert the block
The block starts with one panel. Click the + button inside the accordion to add more panels.
Accordion Block Settings
Layout
Single – Only one panel open at a time. Opening a new panel automatically closes the previous one. Best for FAQs where users typically need one answer at a time.
Multi – Multiple panels can be open simultaneously. Best for content where users might want to compare or reference multiple sections.
When you click another panel, this one closes automatically. Only one answer visible at a time – perfect for FAQs where users browse one question at a time.
When you click another panel, this one closes automatically. Only one answer visible at a time – perfect for FAQs where users browse one question at a time.
When you click another panel, this one closes automatically. Only one answer visible at a time – perfect for FAQs where users browse one question at a time.
Open as many panels as you need. Great for comparing options, referencing multiple sections, or letting users build their own view of the content.
Open as many panels as you need. Great for comparing options, referencing multiple sections, or letting users build their own view of the content.
Open as many panels as you need. Great for comparing options, referencing multiple sections, or letting users build their own view of the content.
Text Direction
Controls text direction for RTL (right-to-left) language support. When set to RTL, the entire accordion layout mirrors—icons and text align to the right.
Icon position start
Icon position start
Icon position end
Icon position end
Hiden icon
Hiden icon
Icon position start
Icon position start
Icon position end
Icon position end
Hiden icon
Hiden icon
Initial Open Panel
Select which panel starts expanded when the page loads. Choose from the list of your panel titles. For Multi layout, you can select multiple panels to start open.
In Multi layout mode, you can have multiple panels open on page load. Perfect for showing related sections users typically need together.
This panel was set to open by default when the page loads. Use this to highlight important information or guide users to the most relevant content first.
This panel was set to open by default when the page loads. Use this to highlight important information or guide users to the most relevant content first.
Icon Settings
Show Icon – Toggle the expand/collapse indicator on or off.
A clean, minimal look without visual indicators. The entire header is still clickable – users just won’t see an icon hinting at the expand/collapse action.
A clean, minimal look without visual indicators. The entire header is still clickable – users just won’t see an icon hinting at the expand/collapse action.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icon Style – Choose from 6 icon animations:
Style
Collapsed
Expanded
Chevron Down
Points down
Rotates to point up
Chevron Side
Points right
Rotates to point down
Plus / X
Plus sign
Rotates 45° to X
Plus / Minus
Plus sign
Changes to minus
Caret
Filled triangle down
Rotates to point up
Caret Side
Filled triangle right
Rotates to point down
Points down, Rotates to point up
Points down, Rotates to point up
Points right, Rotates to point down
Points right, Rotates to point down
Plus sign, Rotates 45° to X
Plus sign, Rotates 45° to X
Plus sign, Changes to minus
Plus sign, Changes to minus
Filled triangle down, Rotates to point up
Filled triangle down, Rotates to point up
Filled triangle right, Rotates to point down
Filled triangle right, Rotates to point down
Icon Background – None, Fill (solid background), or Outline (border only)
Icon stands alone without any container. Clean and minimal – lets the icon speak for itself.
Icon stands alone without any container. Clean and minimal – lets the icon speak for itself.
Icon sits inside a filled container. Adds visual weight and makes the toggle action more prominent.
Icon sits inside a filled container. Adds visual weight and makes the toggle action more prominent.
Icon wrapped in a bordered container. Subtle definition without the heaviness of a solid fill.
Icon wrapped in a bordered container. Subtle definition without the heaviness of a solid fill.
Icon Position – Start | End | Hide
Icon appears before the title. A familiar pattern that draws the eye to the toggle action first.
Icon appears before the title. A familiar pattern that draws the eye to the toggle action first.
Icon appears after the title. Keeps focus on the content with the toggle indicator as a secondary element.
Icon appears after the title. Keeps focus on the content with the toggle indicator as a secondary element.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Spacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Gap – Space between accordion panels
Accordion Panel Settings
Each panel has its own settings:
Panel Title – Click directly on the title text to edit. Keep titles concise and descriptive.
Panel Content – Add any WordPress blocks inside—paragraphs, images, lists, buttons, videos, or other Groundworx blocks.
Panel Spacing
Padding – Controls spacing inside the panel content area (the expanded section)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Styling
Color Settings
Found in the Color panel (half-moon icon) of the block settings:
Active Text Color – Text color when panel is expanded
Active Background Color – Background color when panel is expanded
Inactive Text Color – Text color when panel is collapsed
Inactive Background Color – Background color when panel is collapsed
Colors integrate with your theme.json palette—pick from your theme’s predefined colors or set custom values.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Typography
Control the panel header text appearance:
Font family
Font size
Font weight
Line height
Letter spacing
Text transform
Text decoration
Typography settings apply to all panel headers in the accordion.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Dimensions
Margin – Vertical spacing around the entire accordion block
Padding – Horizontal and vertical padding for panel headers (the clickable trigger area)
Block Spacing – Vertical spacing between each accordion sections
Shadow
Apply a box shadow to the accordion container for depth.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Keyboard Navigation
The Accordion block is fully keyboard accessible:
Key
Action
Tab / Shift+Tab
Move between panel headers
Enter or Space
Expand/collapse the focused panel
Arrow Up / Arrow Left
Move to previous panel
Arrow Down / Arrow Right
Move to next panel
Home
Jump to first panel
End
Jump to last panel
Escape
Close current panel
Behavior note: In Single layout, arrow keys automatically activate (open) the panel when you navigate to it. In Multi layout, arrow keys only move focus—press Enter or Space to toggle.
Accessibility
The Accordion block follows WAI-ARIA authoring practices:
aria-expanded indicates panel state
aria-controls links headers to content
Proper role attributes for screen readers
Visible focus states on headers
Logical tab order
Example Use Cases
FAQ Sections: Common questions and answers, with one answer visible at a time.
Product Details: Specifications, shipping info, and return policy organized into collapsible sections.
Documentation: Step-by-step guides where users progress through sections.
Service Descriptions: Detailed service offerings that don’t overwhelm on first view.
Event Schedules: Day-by-day or session-by-session breakdowns.
Tips
Keep Headers Scannable: Users decide whether to expand based on the header text. Make it clear what’s inside.
Choose the Right Layout: Use Single for FAQs where one answer at a time makes sense. Use Multi when users need to compare or reference multiple sections.
Consider Initial State: Use Initial Open Panel to highlight important content users should see immediately.
Test on Mobile: Accordions work well on mobile where screen space is limited. Make sure your content is touch-friendly.
Next Steps
Try the Tabs block for content that benefits from always-visible navigation
Combine with Card blocks inside panels for structured content
Use Filters to let users search through accordion content on archive pages