Do you want to create an image accordion in WordPress? An image accordion displays multiple images in a compact, interactive format, making it ideal for portfolios, service showcases, and gallery pages. Each panel expands when a visitor interacts with it, letting you pack more visual content without overwhelming the layout.
With the Animated Service Boxes block from Nexter Blocks, you can create both vertical and horizontal image accordions in the WordPress block editor (Gutenberg).
To check the complete feature overview documentation of the Nexter Blocks Animated Service Boxes block, click here.
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
To do this, add the Animated Service Boxes block to the page and follow the steps –
1. Select Image Accordion from the Main Style dropdown. Use this when you want an interactive gallery where individual panels expand to reveal an image and optional text content.
From the Style section, select a predefined visual style for the accordion.
2. From the Orientation section, select the direction the accordion panels expand. Select one of the two options:
- Vertical – To stack panels top to bottom. Use this for portrait-format layouts, portfolio pages, and sidebar-style displays.
- Horizontal – To arrange panels side by side. Use this for wide hero sections or feature highlight rows on landing pages.
Select the option that fits your layout. The steps below use Vertical as an example.
From the Active Slide section, set which accordion panel opens when the page loads. Select Slide 0 to keep all panels at equal width by default. Use this when you want the page to load without any one panel highlighted.
In the Active Slide Width field, set how much the active panel expands relative to the others. Values range from 1 to 15. A value of 1 keeps all panels at equal width. A value of 15 sets the active panel to maximum width. Use a higher value when you want the active image to visually dominate the layout.
Enable the Display Button toggle to add a call-to-action button to each accordion panel. This is useful when each panel links to a separate product, service, or portfolio entry.
When the button is enabled, select a visual style from the Button Style section. For a different way to display grouped content with hover interaction, see How to open Accordion Tabs on hover in WordPress?
3. In the Service Boxes section, add the content for each accordion panel. Three items are included by default. Open any item to begin editing it.
In the Title, Sub Title, and Description fields, add the text that appears on each panel when it is active.
4. In the Featured Image section, upload or select the background image for that panel. Each panel in the image accordion requires its own image.
In the Button Text field, set the label that appears on the button. In the Button Link field, enter the URL the button opens.
Note: Make sure the Display Button toggle is enabled to see the Button Text and Button Link fields.
Follow the same process for each of the other accordion panels.
Click the +Add Item button to add more panels to the accordion.
From the Image Size dropdown, select the image resolution to use for accordion panels. Use a larger image size when displaying full-width horizontal accordions to avoid blurry images on wide screens.
From the Layout tab, control the vertical and horizontal alignment of the text within each panel, and set the overall accordion height. Use this tab to ensure the accordion fits consistently within your page layout.
The vertical image accordion is now visible on your page. For a different multi-panel interactive layout, see How to create multiple columned WordPress Carousel Slider?
Note: Similarly, you can create a horizontal image accordion by selecting Horizontal from the Orientation.
