What is the Accordion Block?
The Accordion block lets you display content in collapsible sections. Each section has a clickable title — visitors can expand it to reveal the content inside and collapse it again when done.
It’s ideal for FAQs, program guides, volunteer information, donation details, or any content that benefits from being organized and scannable without overwhelming your supporters.
This block is built into Zelligram, the site builder for non-profit organizations, and is powered by WordPress’s native Details block — enhanced with extra functionality tailored for your needs.
This is a heading
This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.
This is a heading
This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.
This is a heading
This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.This is a text that can be edited in terms of color, font, and font size, with a WYSIWIG editor.
How to Add an Accordion
Step 1 — Insert the Accordion block
Click the + button to add a new block and search for “Accordion”. Select it from the results to insert it into your post or page.
Note: In the WordPress block directory this block may also appear under the name “Details”. Both refer to the same block.
Step 2 — Set the title
Click on the summary text at the top of the block (it defaults to something like “Details”) and type your section title. This is the clickable label visitors will see.
Example titles: “What is included in the plan?”, “How do I reset my password?”, “Shipping & delivery”.
Step 3 — Add content inside
Click inside the body of the block (below the title) and add your content. You can use Paragraphs, Lists, Images, and most other blocks as inner content.
Step 4 — Repeat for each section
Add a new Accordion block for each question or section you want. Stack them one after the other on the page — they will appear as a vertical list of collapsible items.
Enabling “Keep Only One Active”
By default, visitors can open multiple accordion sections at the same time. If you’d prefer that opening one section automatically closes all others, enable the Keep only one active setting.
How to enable it
- Click on any Accordion block to select it.
- Open the Settings panel on the right side of the editor (the panel with block settings).
- Find the “Keep only one active” toggle and switch it on.
- Repeat for each Accordion block on the page that should participate in this behavior.
Once enabled, the accordion will behave as a traditional single-open accordion — expanding one item will collapse the previously open one.
Important: The “Keep only one active” toggle must be enabled on each individual Accordion block. All blocks on the same page with this setting enabled will be part of the same accordion group.
Tips & Best Practices
- FAQs are the best use case. Stack 5–10 Accordion blocks with common questions and answers for a clean, scannable FAQ section.
- Keep titles short and clear. The summary/title should be a single question or short phrase so visitors can quickly scan and find what they’re looking for.
- You can start a section expanded. In the block toolbar or settings, there is a “Start with open” option (native WordPress feature) that lets a section appear expanded when the page first loads.
- Works with rich content. The content area inside each Accordion supports nested blocks — feel free to add images, bullet lists, or even buttons.
- Style it with the theme. The Accordion block inherits your theme’s typography and colors. You can further customize padding, font size, and border using the block’s built-in style controls in the Settings panel.