Content · Elementor
Accordion widget for Elementor
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
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
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Accordion widget for Elementor. Renders expandable items from a repeater of titles and WYSIWYG content.
render() writes HTML data attributes: data-accordion-trigger, data-accordion-type, data-active-index, data-interaction-speed.
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.
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 “Accordion”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Title”, “Content Type”, “Select Template”, “Select Icon”. Style and Content tabs are listed on this page.
- Preview the published page. Accordion widget for Elementor. Renders expandable items from a repeater of titles and WYSIWYG content.
When to use it
- A product FAQ so the page stays short.
- Shipping and returns copy that would otherwise dominate the layout.
- A help section where only one answer should be open at a time.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Accordion Items — Title | Text inspector control (`accordion_title`). |
| Accordion Items — Content Type | Select inspector control (`accordion_content_type`). |
| Accordion Items — Select Template | Ajax Select2: options load from a King Addons admin-ajax endpoint. |
| Accordion Items — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Accordion Items — Content | Wysiwyg inspector control (`accordion_content`). |
| Content — Accordion Items | Repeater rows; render() loops each item to build the list or slides. |
| Settings — Accordion Type | Written to the `data-accordion-type` HTML attribute in render(). Options: Accordion; Toggle. |
| Settings — Trigger | Written to the `data-accordion-trigger` HTML attribute in render(). Options: Click; Hover. |
| Settings — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: Span; H1; H2; H3; H4; H5; H6. |
| Settings — Animation Duration | Written to the `data-accordion-trigger` HTML attribute in render(). Numeric value used in this widget’s render/JS (default 0.4, min 0, max 2). |
| Settings — Active Item Index | Written to the `data-active-index` HTML attribute in render(). Numeric value used in this widget’s render/JS (default 1, min 0). |
| Settings — Show Search (Pro) | When this switch is on, render() outputs the wrapped markup. |
| Settings — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Settings — Placeholder | Written to the `placeholder` HTML attribute in render(). |
| Icons — Position | The chosen value is read in render() and applied on the front end. Options: Default; Reverse. |
| Icons — Box Style | The chosen value is read in render() and applied on the front end. Options: None; Side Box; Side Curve. |
| Icons — Box Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 200). |
| Icons — Triangle Width | Writes CSS (border-left, king-addons-acc-button) onto the widget’s front-end markup. (min 0, max 100). |
| Icons — Select Toggle Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Icons — Select Toggle Icon Active | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Icons — Active Icon Rotation | Writes CSS (transform, transform-origin) onto the widget’s front-end markup. (min 0, max 360). |
| Title (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title (Normal) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button`. |
| Title (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Title (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button`. |
| Title (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button, {{WRAPPER}} .king-…`. |
| Title (Normal) — Transition | Writes CSS `transition` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Title (Hover) — Color | Writes CSS (king-addons-acc-button, color) onto the widget’s front-end markup. |
| Title (Hover) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover`. |
| Title (Hover) — Border Color | Writes CSS (king-addons-acc-button, border-color) onto the widget’s front-end markup. |
| Title (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button:hover`. |
| Title (Active) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title (Active) — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active`. |
| Title (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Title (Active) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-button.king-addons-acc-active`. |
| Title — Vertical Gutter | Writes CSS (margin-top, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Title — Title Left Distance | Writes CSS `margin-left` onto the widget’s front-end markup. (min 0, max 50). |
| Title — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| 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 — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Icons (Normal) — Main Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Icons (Normal) — Toggle Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Icons (Normal) — Icon Box Bg Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Icons (Normal) — Transition | Writes CSS `transition` onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Icons (Hover) — Main Icon Color | Writes CSS (king-addons-acc-button, color, fill) onto the widget’s front-end markup. |
| Icons (Hover) — Toggle Icon Color | Writes CSS (king-addons-acc-button, color, fill) onto the widget’s front-end markup. |
| Icons (Hover) — Icon Box Bg Color | Writes CSS (king-addons-acc-button, background-color) onto the widget’s front-end markup. |
| Icons (Active) — Main Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Icons (Active) — Toggle Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Icons (Active) — Icon Box Bg Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Icons — Main Icon Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 0, max 50). |
| Icons — Toggle Icon Size | Writes CSS (font-size, width) onto the widget’s front-end markup. (min 0, max 50). |
| Icons — Icon Box Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Content — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Content — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Content — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel`. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-advanced-accordion .king-addons-acc-panel .king-addons-acc-pan…`. |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Content — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Content — 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 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.
Can more than one panel stay open?
Use Accordion Type: Accordion keeps a single panel open; Toggle lets visitors open several. Set this in the Content tab.
Can a panel load an Elementor template?
Yes on Pro: set the item content type to Elementor Template. Free items use the text editor.
How do I add Accordion in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “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 content widgets
Posts Grid & Slider
Posts in a grid, slider, or carousel with query and layout controls (the Posts Grid widget).
Quick Post Slider
A lightweight post slider with navigation and pagination that does not overlap the slides.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Magazine Grid & Slider
A magazine layout: mixed tile sizes for featured and secondary posts, as a grid or slider.
Quick Card Slider
The slider version of Quick Card Grid: same cards, one row that moves.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Accordion after you activate it.