Clicking through an accordion to find out what is inside each item adds a step to every look. On a short list that a visitor is browsing rather than searching, hover removes it.
The Accordion block can open an item as soon as the cursor reaches its title, with no click.
Before You Start
- Edition: Pro — opening on hover needs Nexter Blocks Pro.
- Block to enable: Accordion, switched on under Nexter > Blocks in your WordPress dashboard.
- An Accordion block with a few items — see the main Accordion guide.
Preview
Steps
- Select your Accordion block and open its settings.
- Set the opening behaviour to hover instead of click.
- Publish and move the cursor over the titles on the real page.
How It Behaves
The setting is written onto the accordion wrapper, and the script reads it from there.
- Measured on a published page: with hover chosen the wrapper rendered
data-type="hover"; left on click it rendereddata-type="accordion". - The items themselves are unchanged — measured, the same markup either way. Only the wrapper attribute differs, so nothing about your content needs to change.
- Hover does not exist on a touch screen. A phone or tablet visitor still taps, which is the behaviour to design for if most of your traffic is mobile.
- Measured with Nexter Blocks Pro deactivated: this setting produces no attribute at all on the published page and the accordion falls back to plain click behaviour.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the hover attribute is absent entirely and the accordion behaves as a normal click accordion.
- Hover is easy to trigger by accident. Passing the cursor across a list on the way somewhere else opens items the visitor never asked for.
- It is not a keyboard behaviour. Someone tabbing through the page still activates items the ordinary way, so hover is an addition rather than a replacement.
- Think twice for long content. An item that opens on hover and pushes the rest of the page down can move the very title the visitor was reaching for.
Troubleshooting
Hovering does nothing
Check Nexter Blocks Pro is active. Measured with Pro off, the wrapper carries no hover attribute at all, so the script has nothing to act on.
It works on desktop but not on my phone
That is expected. A touch screen has no hover state, so the item opens on tap instead.
Items open when I did not mean to touch them
That is the trade-off hover makes. If the list is long or sits beside other controls, click is the safer choice.
The accordion opens but immediately closes
The cursor is leaving the item as the body expands beneath it. Reduce the spacing between items so the pointer stays inside the block.
