A long page of questions and answers asks the reader to scan past everything they did not come for. An accordion shows the questions and keeps the answers folded away until one is wanted.
The Accordion block builds that list in Gutenberg: each item is a title and a body, and the visitor opens the ones they care about.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Accordion, switched on under Nexter > Blocks in your WordPress dashboard.
Video Tutorial
Steps
- Add the Accordion block to your page.
- Open the item list and write the title of your first item.
- Write the content that belongs under that title.
- Add as many further items as you need.
- Choose the toggle icon shown in its closed and open states.
- Style the titles, the body and the spacing, then publish.
How It Behaves
The block renders one item per entry in its list, wrapped in a container the browser treats as a set of tabs.
- One item per entry. Measured on a published page: three entries rendered three
.tpgb-accor-itemblocks, each with its own title and body. - The wrapper announces itself to assistive technology — measured, it carries
role="tablist". - The toggle icon is a real element, not a font trick. Measured: switching it on added an
.accordion-toggle-iconholding separate open and close icons. - Opening and closing happens on the published page, not in the editor.
- Measured with Nexter Blocks Pro deactivated: the accordion still renders, with its items and toggle icon intact. It is a free block.
What Needs Pro
The block and its items are free. These four settings are not — each was measured with Nexter Blocks Pro deactivated and produced nothing at all on the published page.
- Opening an item on hover instead of on click.
- Keeping one item open at all times, so the accordion is never fully collapsed.
- Driving a carousel from the accordion through a shared ID.
- FAQ schema — measured, with Pro active the page emitted
FAQPagestructured data; with Pro off it did not.
Limitations
- Everything is in the markup from the start. A closed item is hidden, not absent, so a very long accordion is still a very long page for the browser to load.
- The default active item setting does not work. Measured: no item opens by default whatever value is set. This is reported to the development team — see the open or close an item by default guide.
- One accordion per block. Two independent lists means two blocks.
- Titles carry the weight. A visitor decides what to open from the title alone, so vague titles make the whole pattern useless.
Troubleshooting
Nothing opens when I click
Check you are on the published page rather than the editor, and that no other plugin on the page is throwing a JavaScript error.
I set a default open item and nothing opens
That setting is currently broken. Measured: no item receives the active state whatever value is used. It is reported to the development team; see the open or close by default guide for the detail.
My hover setting does nothing
Opening on hover needs Nexter Blocks Pro. Measured with Pro off, the wrapper stays on click behaviour with no hover attribute at all.
The icons do not appear
Switch the toggle icon on and pick both a closed and an open icon — measured, the block renders the two as separate elements.
