--- title: "How to connect a Carousel with Accordion in WordPress?" url: https://nexterwp.com/docs/connect-carousel-with-accordion-in-wordpress/ date: 2023-02-08 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "An accordion is good at listing things; a carousel is good at showing one thing properly. Connected, the accordion becomes the navigation and the carousel becomes the stage. The two..." image: https://nexterwp.com/wp-content/uploads/2024/05/connect-carousel-with-accordion-in-wordpress-1024x519.jpg word_count: 501 --- # How to connect a Carousel with Accordion in WordPress? ## Key Takeaways - Nexter Blocks Pro conecta el bloque Accordion y el bloque Carousel Anything usando el mismo Carousel ID, por ejemplo Ac1, para que abrir un elemento mueva el carrusel a la diapositiva correspondiente. - El mapeo depende del orden: el primer elemento del Accordion controla la primera slide del Carousel Anything, así que ambas listas deben coincidir exactamente. - La conexión solo aparece en la página publicada y requiere Nexter Blocks Pro activo; con Pro desactivado, no se muestran atributos de conexión y el Accordion vuelve al comportamiento de clic normal. An accordion is good at listing things; a carousel is good at showing one thing properly. Connected, the accordion becomes the navigation and the carousel becomes the stage. The two are paired by putting the same Carousel ID on both blocks — opening an item moves the carousel to the matching slide. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-accordion-toggle/) ## Before You Start - **Edition:** **Pro** — the carousel connection needs Nexter Blocks Pro.- **Block to enable:** Accordion, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Carousel Anything** block on the same page.- An **Accordion** block — see the [main Accordion guide](https://nexterwp.com/docs/add-accordion-in-wordpress/). ## Video Tutorial ## Steps - Add both blocks to the page — the **Carousel Anything** and the **Accordion**. ![Adding the accordion and the carousel](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-carousel-anything-conn-id-new.png) - On the Accordion, set a **Carousel ID** — for example `Ac1`. ![Setting the Carousel ID on the accordion](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-carousel-conn-id-new.png) - Set the **same ID** on the Carousel Anything block. - Give the carousel one slide per accordion item, in the same order. - Publish and open the accordion items on the real page. ## How It Behaves The connection is made entirely by the shared ID: the accordion publishes it, and the carousel listens for it. - **Measured on a published page with the ID `Ac1`:** the accordion wrapper rendered `id="tptab_Ac1"`, `data-accordion-id="tptab_Ac1"` and `data-connection="tpca-Ac1"`.- **With no ID set, none of those attributes appear at all** — measured — and no connection exists.- **This is the same pairing scheme the Carousel Remote and Interactive Circle Info use** — the same `tptab_` and `tpca-` pair — so if you know one, you know the others. See the [Carousel Remote guide](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/) and the [Interactive Circle Info guide](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/).- **Order is the mapping.** The first item drives the first slide, so the two lists have to line up.- **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 - **Both blocks need exactly the same ID.** A mismatch means no connection at all, with nothing on the page to say anything is wrong.- **Give each pairing on a page its own unique ID**, or two accordions will drive the same carousel.- **There is no automatic mapping.** Adding an item without adding a slide quietly puts the two lists out of step.- **The connection runs on the published page**, not in the editor.- **Pro only** — measured with Pro deactivated, the connection attributes are absent entirely. ## Troubleshooting ### The carousel does not follow the accordion Check the Carousel ID matches on both blocks exactly, that Nexter Blocks Pro is active, and that you are on the published page rather than the editor. ### It moves to the wrong slide The items and slides are out of order. The first item drives the first slide, and so on down the list. ### Two accordions are driving the same carousel They share an ID. Give each pairing its own unique value. ### Nothing happens at all Measured with Nexter Blocks Pro deactivated, the accordion renders no connection attributes whatsoever. Check Pro is active. ## Related Docs - [Add an accordion in WordPress](https://nexterwp.com/docs/add-accordion-in-wordpress/)- [Add a Carousel Remote in WordPress](https://nexterwp.com/docs/add-carousel-remote-in-wordpress/)- [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Open accordion tabs on hover](https://nexterwp.com/docs/wordpress-accordion-on-hover/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)