---
title: "How to set an anchor link to an accordion item in WordPress?"
url: https://nexterwp.com/docs/anchor-link-wordpress-accordion-item/
date: 2023-02-08
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "Pointing someone at one answer inside a long accordion usually means telling them where to scroll and what to click. An anchor does that for them. Give an accordion item..."
image: https://nexterwp.com/wp-content/uploads/2024/05/anchor-link-wordpress-accordion-item-1024x519.jpg
word_count: 484
---

# How to set an anchor link to an accordion item in WordPress?

## Key Takeaways

- Nexter Blocks permite enlazar un elemento de acordeón asignándole un ID único, como refunds, y usando #refunds en el enlace para que el navegador salte a ese elemento.
- El ID debe escribirse sin # y el enlace con #; si dos elementos comparten el mismo ID, el navegador salta al primero que encuentra.
- Los enlaces ancla funcionan en la página publicada y también desde otra página, un correo o un elemento de menú, siempre que terminen con la URL de la página más #your-id.

Pointing someone at one answer inside a long accordion usually means telling them where to scroll and what to click. An anchor does that for them.

Give an accordion item its own ID and you can link to it from anywhere — a button, a menu, a support reply — and the visitor lands on that item.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-accordion-toggle/)

## 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.- An **Accordion** block with a few items — see the [main Accordion guide](https://nexterwp.com/docs/add-accordion-in-wordpress/).

## Steps

- Select the **accordion item** you want to link to and give it a **unique ID** — a short word such as `refunds`.

![Setting a unique ID on an accordion item](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-unique-id-new.png)

- Build the link using that ID with a `#` in front of it, for example `#refunds`.

![Linking to the accordion item](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-advanced-block-link-new.png)

- Publish and follow the link on the real page.

## How It Behaves

The ID becomes a normal HTML id on the item, so the browser treats the link like any other anchor.

- **The ID has to be unique on the page.** Two items sharing one ID means the browser jumps to whichever it meets first.- **Write the ID without the `#`**, and the link *with* it. This is the single most common mistake.- **The link works from anywhere** — another page, an email, a menu item — as long as it ends with the page URL plus `#your-id`.- **It works 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.

## Limitations

- **Keep IDs simple.** Lower-case letters, numbers and hyphens behave predictably; spaces and punctuation do not.- **A sticky header can cover the item** the browser jumps to, because the browser scrolls the item to the very top of the window. See the [sticky container guide](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/) if your header is fixed.- **Renaming an ID breaks every link that used it**, including ones you do not control.- **The anchor targets the item, not its content.** It is a landing point, not a search.

## Troubleshooting

### The link does nothing

The ID and the link do not match. Check the item ID has no `#` and the link does, and that the spelling matches exactly — including capitals.

### It jumps to the wrong item

Two items share the same ID. Give each one its own.

### The item is hidden behind my header

A fixed header overlaps the top of the window, which is where the browser puts the item. Add some top spacing to the item, or reduce the header height.

### It works on one page but not from another

A link from a different page needs the full URL followed by the anchor, not the anchor on its own.

## Related Docs

- [Add an accordion in WordPress](https://nexterwp.com/docs/add-accordion-in-wordpress/)- [Open or close a specific accordion item by default](https://nexterwp.com/docs/openclose-wordpress-accordion-bydefault/)- [Use an image gallery or video inside an accordion](https://nexterwp.com/docs/image-video-inside-accordion-block/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: How do I link to a specific accordion item in WordPress?**
A: Give the accordion item its own unique ID, then build the link with a # in front of that ID, such as #refunds. In Nexter Blocks, the browser treats that as a normal HTML anchor and scrolls straight to the item on the published page. The key detail is that the ID goes on the item without the #, while the link includes it.

**Q: Why does my accordion anchor link do nothing?**
A: The usual cause is a mismatch between the item ID and the link. The item ID must be written without #, and the link must include it, with spelling matching exactly, including capitals. Nexter Blocks uses that ID as a normal HTML id, so even a small typo breaks the jump.

**Q: What should I use for an accordion anchor ID?**
A: Short, simple IDs work best. Lower-case letters, numbers, and hyphens behave predictably, while spaces and punctuation can cause problems. A clean ID like refunds is easier to reuse in menus, buttons, or support replies because it stays readable and less error-prone when you build links from other pages or emails.

**Q: Can I link to an accordion item from another page or email?**
A: The anchor works from anywhere as long as the link ends with the full page URL plus #your-id. That means a button on another page, an email, or even a menu item can point straight to one accordion item. The important part is using the full URL when you are not already on that page.

**Q: Why is my accordion anchor hidden behind a sticky header?**
A: A fixed header can cover the target because the browser scrolls the anchored item to the very top of the window. That makes the item look like it landed too high even though the jump worked. Adding top spacing to the item or reducing header height helps keep the target visible after the scroll.

**Q: Does this work with Nexter Blocks free or Pro?**
A: This anchor-link setup works with Nexter Blocks free and also with Nexter Blocks Pro deactivated because Accordion is a free block. The page notes that the accordion still renders with its items and toggle icon intact even when Pro is off. That makes it safe to use for basic anchor linking without depending on Pro features.