Build vertical and horizontal image accordions using dynamic data from Posts, ACF repeater fields or static content. Includes support for applying reveal animations on inner elements, allowing users to interact with both hover & click.

Accordion items

The image accordion is made up of ‘items’. Similar to how you’d use a slider, you can either add new items in manually or use a repeater provider/consumer to add them in dynamically from posts or ACF fields.

For each accordion item, set a background image and add any elements that you want inside. Apply a fade-in animation for any elements that you wish to only appear when that particular accordion-item has been opened.

Each accordion item is a flex container, so you can position the elements using the flex layout controls. There’s also an option to turn each item into a link if you wanted to link directly to the posts or pages.

Layout

Height – For either a vertical or horizontal accordion you’ll need to set a height. This can be changed across different device widths.

Flex Direction – Choose either to display as a vertical or horizontal accordion by changing the flex-direction at each breakpoint.

Flex Grow (collapse & expand) – Choose how extreme the difference in size between the collapsed and expanded items is by changing the flex-grow. A larger flex-grow value for the expanded item will mean it will take up more space.

Gap – If you want to set a visible gap between each item in the accordion you can set it here.

Behaviour

First item open on page load – Enabling with force the first item open when the page first loads. (any elements inside this expanded item will be visible by default if using the animation settings)

Allow hover to open – To cover all devices types, the default behaviour is that the accordion items can be opened on click. Enable this setting if you want desktop users to also be able to hover to expand the items.

Close all when not hovering – If using the hover option, you can also choose to close all when the cursor is moves away from the accordion completely. For touch-only devices, they will be unaffected.

Stagger animations – Any elements inside with Zion Builder’s animations will automatically be triggered only in the visible accordion item. You can set a staggered delay so they appear at slightly different times as they appear. For eg, setting to 50ms means the first element will appear after 50ms, then the second at 100ms, 150ms, and so on.

Overlay

Each of the accordion items has an overlay that covers the image to allow the content in front to be more visible. You can change the opacity of this overlay in these three states.. ‘regular’, ‘active’ (when it’s expanded) and ‘hover’.

For convenience, there’s also a background colour setting to change the colour of the overlay. For more control over the backgrounds, for eg if wanted to add a gradient, head to the styling tab where you’ll find all the CSS properties.