Media · Elementor
Image Accordion widget for Elementor
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
render() writes HTML data attributes: data-settings, data-src.
get_script_depends() enqueues: lightgallery-lightgallery.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-settings.
Clicks open LightGallery; the gallery is not a separate WordPress plugin.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Image Accordion”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Layout”, “Interaction”, “Image Size”, “Active Image By Default”. Style and Content tabs are listed on this page.
- Preview the published page. render() writes HTML data attributes: data-settings, data-src.
When to use it
- A photography series.
- A collection lookbook.
- A destination picker.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Image Accordion.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Settings — Layout | Writes CSS `flex-direction` onto the widget’s front-end markup. Options: Horizontal; Vertical (Pro). |
| Settings — Interaction | The chosen value is read in render() and applied on the front end. Options: Hover; Click (Pro). |
| Settings — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Settings — Active Image By Default | Numeric value used in this widget’s render/JS (default 0, min 0). |
| Settings — Height | Writes CSS `height` onto the widget’s front-end markup. (min 20, max 1500). |
| Settings — Grow (Active) | Writes CSS `flex` onto the widget’s front-end markup. (min 1, max 10). |
| Settings — Gutter | Writes CSS (king-addons-image-accordion-item, margin-right, margin-bottom) onto the widget’s front-end markup. (min 0, max 100). |
| Settings — Border Type | Options: Outer; Individual. |
| Settings — Border Radius | Writes CSS (king-addons-image-accordion-item, border-radius) onto the widget’s front-end markup. |
| Settings — Skew Images (Pro) | Switcher inspector control (`accordion_skew`). |
| Settings — Grow Transition | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| accordion_items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| accordion_items — Size | WordPress image size name passed into the thumbnail URL. Options: Cover; Contain; Auto. |
| accordion_items — Position | Writes CSS `background-position` onto the widget’s front-end markup. Options: Center Center; Center Left; Center Right; Top Center; Top Left; Top Right; Bottom Center; Bottom Left…. |
| accordion_items — Repeat | Writes CSS `background-repeat` onto the widget’s front-end markup. Options: Repeat; No-repeat; Repeat-x; Repeat-y. |
| accordion_items — Title | Text inspector control (`accordion_item_title`). |
| accordion_items — Description | Textarea inspector control (`accordion_item_description`). |
| accordion_items — Button Text | Text inspector control (`element_button_text`). |
| accordion_items — Button URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| accordion_items — Use Button URL as Image Link | Switcher inspector control (`wrapper_link`). |
| Content — Accordion Items | Repeater rows; render() loops each item to build the list or slides. |
| Accordion Elements — Select Element | Select inspector control (`element_select`). |
| Accordion Elements — Display | Options: Inline; Seperate Line; Custom Width. |
| Accordion Elements — Element Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 100). |
| Accordion Elements — Vertical Align | Options: Top; Middle; Bottom. |
| Accordion Elements — Horizontal Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Accordion Elements — Text HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; div; span…. |
| Accordion Elements — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Accordion Elements — Extra Text Display | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Accordion Elements — Extra Text | Printed in the widget HTML from render(). |
| Accordion Elements — Extra Icon Position | The chosen value is read in render() and applied on the front end. Options: None; Before Element; After Element. |
| Accordion Elements — Select Icon (Element Extra Icon) | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Accordion Elements — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Accordion Elements — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Accordion Elements — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Accordion Elements — Animation Timing | Select inspector control (`element_animation_timing`). |
| Accordion Elements — Animation Size | Options: Small; Medium; Large. |
| Accordion Elements — Animation Transparency | Switcher inspector control (`element_animation_tr`). |
| Accordion Elements — Show on this Device | Switcher inspector control (`element_show_on`). |
| Elements — Accordion Elements | Repeater rows; render() loops each item to build the list or slides. |
| Media Overlay — Overlay Width | Writes CSS (width, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Overlay Height | Writes CSS (height, top, left, bottom, right) onto the widget’s front-end markup. (min 0, max 100). |
| Media Overlay — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Media Overlay — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Media Overlay — Animation Delay | Writes CSS (king-addons-animation-wrap, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Media Overlay — Animation Timing | Select inspector control (`overlay_animation_timing`). |
| Media Overlay — Animation Size | Options: Small; Medium; Large. |
| Media Overlay — Animation Transparency | Switcher inspector control (`overlay_animation_tr`). |
| Image Effects — Select Effect | The chosen value is read in render() and applied on the front end. Options: None; Zoom In (Pro); Zoom Out (Pro); Grayscale In; Grayscale Out (Pro); Blur In; Blur Out (Pro); Slide. |
| Image Effects — Animation Duration | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 0.5, min 0, max 5). |
| Image Effects — Animation Delay | Writes CSS (king-addons-image-accordion-item, transition-delay) onto the widget’s front-end markup. (default 0, min 0, max 5). |
| Image Effects — Animation Timing | Select inspector control (`image_effects_animation_timing`). |
| Image Effects — Animation Size | The chosen value is read in render() and applied on the front end. Options: Small; Medium; Large. |
| Image Effects — Animation Direction | The chosen value is read in render() and applied on the front end. Options: Top; Right; Bottom; Left. |
| Media Overlay — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-img-accordion-hover-bg`. |
| Media Overlay — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-accordion-item`. |
| Media Overlay — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Title — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-title a`. |
| Title — Transition Duration (seconds) | Writes CSS (transition-duration, king-addons-pointer-item) onto the widget’s front-end markup. (default 0.2, min 0, max 5). |
| Title — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Title — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Description — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Description — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Description — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-description`. |
| Description — Description Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| Description — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Description — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Description — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Description — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-button .inner-block a`. |
| Button (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-button a`. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-button .inner-block a`. |
| Button (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-button .inner-block a.king-addons-button-no…`. |
| Button (Hover) — Color | Writes CSS (a, color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (a, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-img-accordion-item-button .inner-block :hover a`. |
| Button — Select Animation | Animation picker; the chosen effect is applied on the front end. |
| Button — Transition Duration (ms) | Writes CSS (transition-duration, a) onto the widget’s front-end markup. (default 300, min 0). |
| Button — Animation Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 100). |
| Button — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Button — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button — Extra Icon Spacing | Writes CSS (padding-right, padding-left) onto the widget’s front-end markup. (min 0, max 25). |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS (border-radius, a) onto the widget’s front-end markup. |
| Separator — Color | Writes CSS `border-bottom-color` onto the widget’s front-end markup. |
| Separator — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 300). |
| Separator — Height | Writes CSS `border-bottom-width` onto the widget’s front-end markup. (min 0, max 100). |
| Separator — Type | Writes CSS `border-bottom-style` onto the widget’s front-end markup. Options: Solid; Double; Dotted; Dashed; Groove. |
| Separator — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Separator — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Image Accordion options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Image Accordion in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Image Accordion”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Slider/Carousel
A general slider for images, text, or mixed slides. Use this for heroes; use Posts Grid for post queries.
Advanced Image Gallery
A gallery of images and optional videos from the Media Library or a manual list, with lightbox.
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Image Accordion after you activate it.