← All widgetsWidget 189 · emcp_custom_189

Image Accordion

Elementor widget2 layouts12 content options18 style options3 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: image, accordion, expand, gallery, hover, panels.

Setup guide

  1. Open a page in Elementor, search the panel for Image Accordion and drag it into a container.
  2. Content › Panels: Panels, Direction, Expand On, Open Panel by Default (0 = none), Expanded Size (flex grow), Height, Gap, Text Position and 4 more.
  3. Pick a Expand On: Hover, Click. Each one is shown below.
  4. Style tab sections: Panel, Text. Colours, typography and spacing set here are scoped to this widget instance.
  5. Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout

Hover

Expand On = hover

Mountains
01Mountains

Trails for every level.

Explore
Mountains
Coast
02Coast

Sun, salt and long evenings.

Coast
City
03City

Weekends that never end.

City
Forest
04Forest

Quiet in every direction.

Forest
Layout

Click

Expand On = click

Mountains
01Mountains

Trails for every level.

Explore
Mountains
Coast
02Coast

Sun, salt and long evenings.

Coast
City
03City

Weekends that never end.

City
Forest
04Forest

Quiet in every direction.

Forest

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Panels

OptionTypeChoices / rangeDefaultNotes
Panels
panels		Repeater4 items
↳ Image
image		Image
↳ Title
title		TextPanel
↳ Text
text		Textarea
↳ Small Label
label		Text
↳ Link
link		Link
↳ Button Text
btn		Text
Direction
direction		DropdownHorizontal, Verticalhorizontal
Expand On
trigger		DropdownHover, Clickhover
Open Panel by Default (0 = none)
active		Numbermin 0, max 201
Expanded Size (flex grow)
grow		Slidermin 1.5, max 10, px4
Height
height		Slidermin 200, max 1000, px/vh460Responsive
Gap
gap		Slidermin 0, max 40, px8
Text Position
text_pos		DropdownBottom, Centre, Topbottom
Collapsed Title
collapsed_title		DropdownRotated along the edge, Hidden until expanded, Normalrotated
Autoplay Interval (ms, 0 = off)
autoplay		Numbermin 0, max 200000
Transition (ms)
duration		Numbermin 100, max 2000600
Zoom Image When Expanded
zoom		Toggleon / offyes

Style tab

Panel

OptionTypeChoices / rangeDefaultNotes
Radius
radius		Slidermin 0, max 60, px14
Overlay (collapsed)
overlay		Colorrgba(16,24,40,0.45)
Overlay (expanded)
overlay_a		Colorrgba(16,24,40,0.2)
Border
border		Border
Expanded Border Color
border_a		Color
Shadow
shadow		Box shadow
Image Filters (collapsed)
filter		Css_filter
Content Padding
pad		Dimensions

Text

OptionTypeChoices / rangeDefaultNotes
Title Typography
title_typo		Typography
Title Color
title_color		Color#ffffff
Text Typography
text_typo		Typography
Text Color
text_color		Colorrgba(255,255,255,0.85)
Label Typography
label_typo		Typography
Label Color
label_color		Color#ffffff
Label Background
label_bg		Colorrgba(255,255,255,0.18)
Button Color
btn_color		Color#101828
Button Background
btn_bg		Color#ffffff
Button Radius
btn_radius		Slidermin 0, max 60, px8

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_189" and a settings object using the keys above. Run get-custom-widget with id 189 for the full JSON spec.