--- title: "How to Add an Accordion in WordPress?" url: https://nexterwp.com/docs/add-accordion-in-wordpress/ date: 2023-02-08 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2023/02/add-accordion-in-wordpress-1024x519.jpg word_count: 623 --- # How to Add an Accordion in WordPress? ## Key Takeaways - Nexter Blocks Accordion builds each item in Gutenberg as a title and a body, and the visitor opens only the questions they care about. - Nexter Blocks Accordion is free in Nexter Blocks, and it is switched on under Nexter > Blocks in the WordPress dashboard. - Nexter Blocks Pro adds hover opening, keeping one item open at all times, driving a carousel through a shared ID, and FAQ schema. - Nexter Blocks Accordion has limits: the default active item setting does not work, one accordion per block is allowed, and closed items remain in the markup from the start. 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. [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. ## Video Tutorial https://www.youtube.com/watch?v=nPf6CfEVHLM&t Video walkthrough: adding and configuring the Accordion block in Nexter Blocks. ## Steps - Add the **Accordion** block to your page. ![Adding the Accordion block](https://nexterwp.com/wp-content/uploads/2023/02/Nexter-Blocks-Accordion-Activation-1.webp) - Open the item list and write the **title** of your first item. ![Adding an accordion item title](https://nexterwp.com/wp-content/uploads/2023/02/accordion-design-type.webp) ![Nexter Blocks Accordion editor: Layout tab, Content panel with the first accordion item open showing its Title, Content Type and Description fields](https://nexterwp.com/wp-content/uploads/2026/09/accordion-item-title-full.webp) - Write the **content** that belongs under that title. ![Adding the accordion item content](https://nexterwp.com/wp-content/uploads/2023/02/accordion-custom-pattern-new.webp) - Add as many further items as you need. ![Adding more accordion items](https://nexterwp.com/wp-content/uploads/2023/02/accordion-expand-collapse-button-new.webp) - Choose the **toggle icon** shown in its closed and open states. ![Choosing the accordion toggle icons](https://nexterwp.com/wp-content/uploads/2023/02/accordion-extra-options-new.webp) - Style the titles, the body and the spacing, then publish. ![Styling the accordion](https://nexterwp.com/wp-content/uploads/2023/02/accordion-style-new.webp) ![Nexter Blocks Accordion editor: Style tab with the Title panel open showing Typography, Alignment and Normal, Active and Hover colour settings](https://nexterwp.com/wp-content/uploads/2026/09/accordion-style-title-full.webp) ## 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-item` blocks, 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-icon` holding 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](https://nexterwp.com/docs/wordpress-accordion-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](https://nexterwp.com/docs/connect-carousel-with-accordion-in-wordpress/) through a shared ID.- **FAQ schema** — measured, with Pro active the page emitted `FAQPage` structured 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](https://nexterwp.com/docs/openclose-wordpress-accordion-bydefault/).- **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](https://nexterwp.com/docs/openclose-wordpress-accordion-bydefault/) 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. ## Related Docs - [Open accordion tabs on hover in WordPress](https://nexterwp.com/docs/wordpress-accordion-on-hover/)- [Open or close a specific accordion item by default](https://nexterwp.com/docs/openclose-wordpress-accordion-bydefault/)- [Set an anchor link to an accordion item](https://nexterwp.com/docs/anchor-link-wordpress-accordion-item/)- [Use an image gallery or video inside an accordion](https://nexterwp.com/docs/image-video-inside-accordion-block/)- [Connect a carousel with an accordion](https://nexterwp.com/docs/connect-carousel-with-accordion-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: Why does nothing happen when I click an accordion item on the page?** A: Accordion interaction happens on the published page, not in the editor, so clicks can look broken while you are still editing. Another common blocker is a JavaScript error from a different plugin on the same page. Nexter Blocks renders the items and toggle icon even with Nexter Blocks Pro deactivated, so if clicks fail, the first thing to isolate is whether you are testing the live page and whether another script is interfering. **Q: What do I need before adding an accordion in WordPress?** A: The Accordion block is available in the free edition and also works with Nexter Blocks Pro. In WordPress, it is enabled under Nexter > Blocks in your dashboard. That matters because the block itself is free, so you do not need Pro just to build a basic accordion list with titles and bodies. **Q: Can I open accordion items on hover instead of click?** A: Hover opening is a Pro-only behavior in Nexter Blocks. With Pro off, the block stays on click behavior and does not add a hover attribute at all. That means hover is useful only when you want faster scanning on desktop, but it is not part of the free accordion behavior. **Q: Why does my default open item setting not work?** A: The default active item setting is currently broken. Measured on the published page, no item opens by default no matter what value is set. That means you should not rely on a pre-opened panel for important content yet, because every accordion item still loads closed until a visitor opens it manually. **Q: How many accordion lists can I put on one page?** A: One Accordion block gives you one independent list. If you need two separate lists that behave independently, you need two blocks. That limitation matters because each block renders its own set of items, so splitting content across blocks keeps titles and interactions from getting mixed together. **Q: Can I use an accordion to show images or connect it to a carousel?** A: Nexter Blocks supports related patterns around the Accordion block, including using an image gallery or video inside an accordion and connecting a carousel with an accordion. Those are tied to separate docs like [Use an image gallery or video inside an accordion](https://nexterwp.com/docs/image-video-inside-accordion-block/) and [Connect a carousel with an accordion](https://nexterwp.com/docs/connect-carousel-with-accordion-in-wordpress/). The practical takeaway is that the accordion can act as more than plain text when you need richer content or synced visuals.