---
title: "How to use Image Gallery, Video inside Accordion WordPress Block?"
url: https://nexterwp.com/docs/image-video-inside-accordion-block/
date: 2023-02-08
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Some answers are not text. A setup question is quicker to answer with a screenshot, and a how-does-it-look question is quicker to answer with a video. An accordion item takes..."
image: https://nexterwp.com/wp-content/uploads/2024/05/image-video-inside-accordion-block-1024x519.jpg
word_count: 486
---

# How to use Image Gallery, Video inside Accordion WordPress Block?

## Key Takeaways

- Nexter Blocks Accordion convierte un elemento en un contenedor de bloques ordinario, así que una galería, un video, un embed, botones o columnas pueden ir dentro igual que en cualquier otra parte de la página.
- Nexter Blocks muestra que el contenido de un elemento cerrado sigue cargando con la página porque está oculto con CSS, y eso hace que diez elementos con una galería carguen diez galerías aunque nadie los abra.
- Nexter Blocks Pro no es necesario para que el acordeón se renderice: desactivado, el acordeón sigue mostrando sus elementos y el icono de alternancia, y la edición es Free en Nexter Blocks (free).

Some answers are not text. A setup question is quicker to answer with a screenshot, and a how-does-it-look question is quicker to answer with a video.

An accordion item takes ordinary Gutenberg blocks, so a gallery or a video can sit inside one exactly as it would anywhere else on the page.

[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 at least one item — see the [main Accordion guide](https://nexterwp.com/docs/add-accordion-in-wordpress/).

## Preview

![Front end of a Nexter Blocks Accordion whose first item uses the Editor content type and contains an image](https://nexterwp.com/wp-content/uploads/2026/09/accordion-image-inside-preview.webp)

## Steps

- Select the **accordion item** whose content you want to replace.

![Choosing the accordion item to edit](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-content-editor-new.webp)

- Switch that item's content to hold **blocks** rather than plain text.

![Switching the accordion item to blocks](https://nexterwp.com/wp-content/uploads/2023/02/accordion-layout-create-pattern-setting-new.webp)

- Add whatever you need inside it — a **Gallery**, a **Video**, an embed, or several together.

![Adding a gallery or video inside the accordion item](https://nexterwp.com/wp-content/uploads/2023/02/accordion-custom-pattern-new.webp)

- Publish and open the item on the real page.

## How It Behaves

The item becomes an ordinary container, so the blocks inside it behave the way they do anywhere else.

- **Any block can go in** — galleries, videos, embeds, buttons, columns, or another Nexter block.- **Closed does not mean absent.** The content is in the page from the start and is hidden with CSS, so images and embeds inside a closed item still load with the page.- **That is the main cost to watch.** Ten items each holding a gallery is ten galleries loading whether or not anybody opens them.- **Media inherits the item's width**, so a wide gallery is constrained by the accordion rather than the page.- Measured with Nexter Blocks Pro deactivated: the accordion still renders, with its items and toggle icon intact. It is a free block.

## Limitations

- **Weight adds up quickly.** Prefer a few well-chosen images per item over a full gallery in every one.- **Self-hosted video is the heaviest option.** An embed from YouTube or Vimeo usually loads less up front.- **Layout inside a narrow item is tighter than the page.** Check a multi-column gallery on a phone before publishing.- **Opening an item moves everything below it.** With tall media inside, that is a long jump for the reader.

## Troubleshooting

### I cannot add blocks inside the item

The item is still set to plain text content. Switch it to hold blocks first, then the inserter appears inside it.

### The page is slow

Everything inside every item loads with the page, open or not. Reduce the amount of media, or move the heaviest items out of the accordion.

### My video is cut off at the sides

The item is narrower than the page. Reduce the item padding, or let the container run wider — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).

### The gallery looks wrong on mobile

Set the gallery to fewer columns at small sizes. It is constrained by the accordion, so it has less room than the same gallery on the page.

## Related Docs

- [Add an accordion in WordPress](https://nexterwp.com/docs/add-accordion-in-wordpress/)- [Set an anchor link to an accordion item](https://nexterwp.com/docs/anchor-link-wordpress-accordion-item/)- [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 can’t I add blocks inside an accordion item in WordPress?**
A: The item is still set to plain text content, so the block inserter never appears inside it. Nexter Blocks turns that item into a block container only after you switch its content mode, and that is what makes galleries, videos, embeds, and other blocks possible. If the inserter is missing, the fix is usually not the block itself but the item’s content type.

**Q: Can I put a gallery or video inside an accordion item?**
A: An accordion item takes ordinary Gutenberg blocks, so a gallery or video can sit inside it exactly like it would anywhere else on the page. Nexter Blocks, part of Nexter WP and POSIMYTH Nexter, supports galleries, videos, embeds, buttons, columns, and even another Nexter block inside the item. The main thing to remember is that media still behaves like normal page content once it is inside.

**Q: Why does my WordPress page get slow when I add media inside accordion items?**
A: Everything inside every accordion item loads with the page, even when the item stays closed. That means ten items with galleries are still ten galleries loading up front. The practical fix is to keep media light, use only a few well-chosen images per item, and move the heaviest content out of the accordion when speed matters.

**Q: What is the best way to use video inside an accordion without hurting performance?**
A: Self-hosted video is the heaviest option here, so an embed from YouTube or Vimeo usually loads less up front. That matters because closed accordion items are hidden with CSS, not removed from the page, so their media still loads. For most pages, keeping video as an embed instead of self-hosted is the safer choice when you want faster initial load.

**Q: Why is my video cut off at the sides inside the accordion?**
A: The accordion item is narrower than the full page, so wide media gets constrained by that container. Reducing the item padding can give the video more room, and letting the container run wider helps too. If you are using a layout with tight spacing, this issue shows up fast because media inherits the item width instead of ignoring it.

**Q: How should I set up a gallery inside an accordion for mobile?**
A: Use fewer columns at small sizes. The gallery has less room inside an accordion than it does on the full page, so multi-column layouts can look cramped on phones. Nexter Blocks keeps the gallery constrained by the accordion width, which makes mobile testing important before publishing if you want images to stay readable and aligned.