An image accordion for Elementor — panels that expand on hover or click, for portfolios, categories and product ranges.
Each panel eases open while the rest close in the same beat, so the strip never jumps. Nothing here is a static image grid.
Pointer devices get the whole set without a single click. Touch falls back to tap, so the same strip works everywhere.
Point the strip at a post type and it builds itself — featured image, title and date, ordered however you like.
Panel height, corner radius and the gap between panels are all yours. This one runs flush — square corners, nothing between the frames.
Four suites, one strip. Open a room and the rate, the floor area and what the window looks onto come with it.
The kitchen writes it on Monday and cooks it until Sunday. Open a course to see what lands on the plate.
Small groups, local guides, no coach parks. Open a destination for the dates and the price per person.
Four looks from the autumn capsule. Open one for the piece and what it costs.
Every panel carries its own heading, a short label above it and an optional button, revealed only once the panel is open.
Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.
Read the documentation for this one, or write to us — a human answers inside a business day.
Yes — the Image Accordion widget in Sky Addons for Elementor has a Mouse Event control set to Click by default, with Mouse Over as the alternative. One panel opens at a time; the rest slide back and share the remaining space equally, and each panel’s title, category and button only fade in once it is open.
Yes. The Active Item field takes a panel number and opens it as the accordion initialises. Pair it with Disable Close On Click, which stops a click on the open panel collapsing it, and the row is never left in the all-closed state — useful when the panel content is the section’s actual message.
Roughly 40 percent of the screen width, with the remaining panels sharing what is left equally; below 768 pixels the open panel goes to 80 percent instead. The widths are measured against the viewport rather than the parent column, so the Image Accordion is happiest in a full-width section.
No — each panel is a CSS background image, so there is no srcset and no native lazy-loading attribute, and hand-built panels use whatever file you picked at its original size. Resize your photos before uploading. Panels driven by a post query are safer, since those use the featured image at WordPress’s Large size.
No. The photograph is a CSS background, which carries no alt attribute, so treat these as decorative imagery. The overlay is real markup, though — the title renders in whichever heading tag you select and links out, the category is a live link on post-driven panels, and the button is a normal anchor.
No. It is a Sky Addons Pro widget running on free Elementor with any theme. The panel animation uses GSAP, which Sky Addons bundles and enqueues only on pages containing a widget that needs it, so there is no external library to install and nothing loading site-wide.
Yes. Set the content source to Dynamic Posts and each panel takes a post’s featured image, title, first category and permalink from the query you build. You can also point it at a saved Elementor loop template, in which case that template renders inside each panel and you design the overlay yourself.
Yes — fourteen named easing curves are offered, spanning Expo Scale, Slow Motion, Back, Bounce and Elastic, with a Slow Motion curve as the default. Each open or close runs for one second. Elastic and Bounce overshoot noticeably, so they read best on two or three panels rather than six.
It runs, but honestly: panels stay in one horizontal row at every width, with no stacked mobile layout. Five panels on a 390-pixel phone leaves each closed one about 60 pixels wide. Keep mobile down to two or three panels, or hide the widget on small screens and show a stacked alternative there.
A standard accordion toggles stacked blocks of text vertically; the Image Accordion is a horizontal row of photographs where the picture is the content and the caption appears only when a panel opens. Use it for category, portfolio or product-range navigation — and use a text accordion for FAQs, which is what that widget is for.
