---
title: "How to Add an Accordion in WordPress?"
url: https://nexterwp.com/docs/add-accordion-in-wordpress/
date: 2023-02-08
modified: 2026-08-30
author: "Aditya Sharma"
description: "What It Does The Accordion block in Nexter Blocks builds vertically stacked, expandable content panels. A visitor clicks (or hovers, if that mode is enabled) on a title, its content..."
image: https://nexterwp.com/wp-content/uploads/2023/02/add-accordion-in-wordpress-1024x519.jpg
word_count: 1947
---

# How to Add an Accordion in WordPress?

## Key Takeaways

- Nexter Blocks Accordion builds vertically stacked, expandable content panels, and a visitor clicks or hovers on a title to open and collapse the content.
- Enable Schema Markup turns the accordion into FAQPage structured data, which makes an accordion-built FAQ section eligible for rich results in Google Search.
- Three content types per item are available: Content (Free), Editor (Free), and Pattern (Pro), and the Editor option can include blocks like image, shortcode, container, galleries, video, and WooCommerce products.
- Unique ID gives each accordion item a direct anchor link, and the post says links must use that item’s Unique ID field instead of an autogenerated heading anchor.
- Force Accordion Open keeps at least one accordion item open at all times, while Default Active Tab sets one item active by default and reordering items changes which one opens.

## What It Does

The Accordion block in Nexter Blocks builds vertically stacked, expandable content panels. A visitor clicks (or hovers, if that mode is enabled) on a title, its content opens, and clicking again collapses it.

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

## Why It Matters

Long pages full of open text overwhelm visitors and hurt scannability. An accordion is the most common way to build FAQ sections on websites or blog posts: it shows a short list of headings up front and lets a visitor open only the sections they care about, which keeps the page shorter and easier to scan. When schema markup is enabled, the same content can also become eligible for FAQ rich results in Google Search.

## What You Get

- Three content types per item: **Content** (Free), **Editor** (Free), and **Pattern** (Pro)

- Dynamic content fields (Pro) to pull post title, excerpt, and other site data into an accordion title or description

- Per-item icons plus a global toggle icon, each with separate open/closed states

- A **Unique ID** field per item for [direct anchor links to a specific accordion item](https://nexterwp.com/docs/anchor-link-wordpress-accordion-item/)

- A built-in **Enable Schema Markup** toggle for FAQPage structured data

- Pro-only **Default Active Tab**, on-hover mode, **Force Accordion Open**, and **Carousel Connection ID** options

- Full Style tab control over title, description, icons, and the expand/collapse button

## Benefits

- A no-code FAQ builder that also doubles as an SEO asset through its schema markup toggle

- Cuts visible page length by hiding secondary content until a visitor chooses to open it

- One block covers both simple text FAQs (Content type) and complex nested layouts (Editor and Pattern types)

## Capabilities

Required setup before you start:

- Make sure the default WordPress Block editor is active.

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Accordion block is activated. To verify this, visit Nexter → Blocks and search for Accordion and activate.

- This is a Freemium block. To unlock the extra features, you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

**Content and icon options**

- **Multiple content sources** - Three content types per accordion item: **Content** (Free), **Editor** (Free), and **Pattern** (Pro). With the Editor option, you can use other WordPress blocks like image, shortcode, container, etc. inside the accordion.

- **Show dynamic content in accordion** (Pro) - Make your accordions versatile by showing dynamic data from different parts of your website, like post title or post excerpt, using the dynamic field options.

- **Individual icons for each accordion** (Free) - Assign a different icon to each accordion item from the **Front Icon** option inside each accordion item. Turn on the toggle to set the icon.

- **Unique ID** (Free) - Add a unique ID to each accordion item to [create anchor links directly to that accordion item](https://nexterwp.com/docs/anchor-link-wordpress-accordion-item/).

- **Standard icons for all accordion items** (Free) - Set the standard open and close icons applied to all items.

- **HTML tag options for accordion headings** (Free) - Set different heading tags (H1, H2, etc.) for the accordion titles to support your SEO structure.

- **SEO Schema Markup** (Free) - Turn your accordion into SEO-friendly FAQPage schema markup.

**Pro extra options** - each covered in its own dedicated doc:

- **Default Active Tab** (Pro) - [Set a specific accordion item to be active by default](https://nexterwp.com/docs/openclose-wordpress-accordion-bydefault/).

- **Accordion Type** (Pro) - [Choose whether the accordion opens on hover or on click](https://nexterwp.com/docs/wordpress-accordion-on-hover/).

- **Title Tag** (Free) - Change the accordion title's HTML tag.

- **Force Accordion Open** (Pro) - Keep at least one accordion item open at all times, so all items can never close together.

- **Carousel Connection ID** (Pro) - [Connect the accordion with the Carousel Anything block](https://nexterwp.com/docs/connect-carousel-with-accordion-in-wordpress/) using a unique ID, so clicking an accordion item also changes the connected slide.

## How It Works

Each accordion item stores its own title and content independently. Clicking a title (or hovering over it, when Accordion Type is set to hover) toggles that item's open state; by default other items close when a new one opens, unless **Force Accordion Open** is enabled to always keep one item expanded. When **Enable Schema Markup** is turned on in the block's **SEO Option** tab, the same visible question/answer content is also output as [FAQPage schema markup](https://schema.org/FAQPage), which is what makes an accordion-built FAQ section eligible to appear as a rich result in Google Search.

## How to Use It

#### Watch the Video Tutorial

https://www.youtube.com/watch?v=nPf6CfEVHLM&t
Video walkthrough: adding and configuring the Accordion block in Nexter Blocks.

#### Step 1: Activate the Accordion Block

- Go to **Nexter** → **Blocks**.

- **Search** for the block name and **turn on the toggle.**

![Turning on the Accordion block toggle inside Nexter Blocks settings](https://nexterwp.com/wp-content/uploads/2023/02/Nexter-Blocks-Accordion-Activation-1-1024x362.png)Activating the Accordion block from Nexter → Blocks.

#### Step 2: Add the Block and Choose a Layout

Add the Accordion block to the page, then click on the **Design from Scratch** button to design the layout from scratch.

![Design from Scratch and Import Pre-Designed Template options for the Accordion block](https://nexterwp.com/wp-content/uploads/2023/02/accordion-design-type-1024x190.png)Choosing how the accordion layout starts: from scratch or from a preset template.

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

#### Step 3: Add Title and Description Content

The Accordion block has multiple ways to add content for both the title and the description. Click on a specific accordion item to see a field to add the title. You can write the title directly or use a dynamic field (Pro) to generate it automatically.

To add a dynamic title, click the cylindrical icon beside the title field and choose the field you want. Once chosen, an **Advanced Settings** toggle appears. Turn it on to set a prefix, postfix, and fallback text.

Setting a dynamic title field for an accordion item using the cylindrical dynamic-field icon.

> *Note: Wherever you see that cylindrical icon within the Nexter Blocks blocks, you can use the dynamic fields.*

For the description, there are the same three options: **Content** (Free) gives you the dynamic field feature just like the title. **Editor** (Free) lets you use the WordPress block editor directly within the accordion content, so you can add almost any block, including images, galleries, shortcodes, carousels, video, and WooCommerce products. **Pattern** (Pro) offers similar capability to Editor, except the layout is built and reused as a Pattern rather than created inline.

![Accordion description content type options: Content, Editor, and Pattern](https://nexterwp.com/wp-content/uploads/2023/02/accordion-custom-pattern-new.png)The three description content types available inside each accordion item.

To learn the full process for adding images and videos inside an accordion item, see our [dedicated guide on adding images and videos inside the Accordion block](https://nexterwp.com/docs/image-video-inside-accordion-block/).

From the **AJAX Load** dropdown, choose the content load type: **Default** keeps the content loaded normally, and **Standard AJAX** loads the content only once it enters the viewport.

> *Note: To make Standard AJAX work, make sure to enable the ****Enable Ajax Templates**** toggle from ****Nexter Blocks**** > ****Extra Options**** > ****Settings****.*

Once you choose a Pattern, a **Backend Visibility** toggle appears. To keep the editing experience smooth, the block stays hidden on the page by default. Turn on the toggle to see and edit it, then turn it off again when done. Next is the **Front Icon** option: turn on the toggle and choose from a list of icons to set an additional icon per accordion item. Then the **Unique ID** field lets you give each accordion item an ID you can link to directly (see What You Get above). Use the **+ Add Accordion** button to add more accordion items.

#### Step 4: Set the Standard Toggle Icons

To set the standard expand and collapse icon for all accordions, go to the **Toggle Icon** tab and turn on the **Show Icon** toggle. Choose different icons for the open and closed states and set their placement from here.

#### Step 5: Add an Expand/Collapse Button (Pro)

Enable the **Expand/Collapse Button** toggle to add a button that opens or closes all accordion items at once. Edit its label from the **Collapse Text** and **Expand Text** fields, and align it from the **Alignment** section.

![Expand/Collapse button toggle and alignment settings for the Accordion block](https://nexterwp.com/wp-content/uploads/2023/02/accordion-expand-collapse-button-new.png)Enabling and aligning the Expand/Collapse All button.

#### Step 6: Turn On SEO Schema Markup

One of the most common use cases for an accordion is building FAQs (Frequently Asked Questions). Used correctly, [FAQ schema](https://schema.org/FAQPage) can boost your SEO and let your FAQ show up directly in the Google SERP.

To turn your accordion into an SEO-friendly structure, add the Accordion block to the page, go to the **SEO Option** tab, and turn on the **Enable Schema Markup** toggle. This adds the required FAQPage structure automatically.

![Enable Schema Markup toggle in the Accordion block](https://nexterwp.com/wp-content/uploads/2023/02/accordion-extra-options-new.png)Turning on Enable Schema Markup from the SEO Option tab.

#### Step 7: Style the Accordion

All styling options live under the block's **Style** tab:

- **Title** (Free) - Typography, alignment, and color for the accordion title's normal, hover, and active state.

- **Title Background** (Free) - Background, padding, border, and spacing between accordion items.

- **Description/Content** (Free) - Typography and alignment for the accordion's inner content.

- **Description/Content Background** (Free) - Background, padding, margin, and border for the description area.

- **Toggle Icon** (Free) - Color, size, and gap (from the title text) for the standard expand/collapse icons.

- **Front Icon** (Free) - Size, color, and spacing for the additional per-item icons.

- **Expand/Collapse Button** (Pro) - Visible only when the Expand/Collapse Button toggle is enabled from the Layout tab.

- **Extra Options** (Pro) - Two unique hover styles for the accordion title, plus a customizable hover background color.

![Accordion Title style tab with typography, alignment, and color controls](https://nexterwp.com/wp-content/uploads/2023/02/accordion-style-new.png)The Title style tab, showing typography and color controls.

Hover style options under Extra Options in the Accordion block's Style tab.

**Advanced** is the global extension available on all blocks: add a custom CSS class in the **Additional CSS class(es)** field to further fine-tune the style with your own CSS. Advanced options stay consistent across every Nexter Blocks block. See the [Advanced tab tutorial](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) for the full list of settings.

## Use Cases

- FAQ sections that also need to show up as a Google FAQ rich result, via the Enable Schema Markup toggle.

- Documentation and glossary pages where each entry should stay collapsed until a reader opens it.

- Product or plugin spec sheets where the Editor content type holds richer blocks (images, galleries, shortcodes, carousels, video, and WooCommerce products) inside each collapsed panel.

- Accordion-driven product galleries, where Carousel Connection ID (Pro) syncs each accordion item to a slide in a Carousel Anything block.

## Limitations

- Dynamic content fields, the Pattern content type, Default Active Tab, on-hover mode, Force Accordion Open, and Carousel Connection ID are all Pro-only. The free version covers the Content/Editor content types, per-item icons, the standard toggle icon, Unique ID, title tag choice, and schema markup.

- **Default Active Tab** opens an item by its position in the list, not by a stable Unique ID or name. Reordering the accordion items changes which one opens by default.

- Unique IDs must stay unique per page. If two accordion items share the same Unique ID, only the first matching one will respond to a link. This is standard browser HTML ID behavior, not a Nexter-specific bug.

- The block has not always opened reliably on some iPad/tablet browsers (see Troubleshooting). Test on your own target devices before publishing.

## Troubleshooting

- **A link to an accordion item won't open it** (FluentSupport ticket #9957) - The customer had linked to an autogenerated heading anchor (like #h-3) instead of the accordion item's own Unique ID. Fix: link to the value in the item's **Unique ID** field, not a page heading anchor.

- **Accordion doesn't open on iPad/tablet** (FluentSupport ticket #14025, confirmed Nexter WP) - The block worked correctly on phone and desktop but failed to expand on an iPad. No official fix was recorded in the ticket thread at the time it was filed; if you hit this, test on your actual target tablet and report it to support.

- **Can't find the Carousel Connection ID field** (FluentSupport tickets #19246, #19239) - Customers looked for this setting on the Carousel Anything block. It actually lives on the Accordion block's Extra Options, since the accordion is what drives the connected carousel's slide changes.