Content · Elementor
Content Toggle widget for Elementor
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel.
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
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel.
Content Toggle Widget (Free).
render() writes HTML data attributes: data-active-class, data-animation, data-default-state, data-hidden-class, data-primary-hide, data-primary-targets, data-secondary-hide, data-secondary-targets.
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 “Content Toggle”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Primary Label”, “Secondary Label”, “Default State”, “Alignment”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Content Toggle.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Content Toggle” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Toggle — Primary Label | Printed in the widget HTML from render(). |
| Toggle — Secondary Label | Printed in the widget HTML from render(). |
| Toggle — Default State | Choose which content is visible on load. |
| Toggle — Alignment | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Toggle — Animation | Slide animation is available in the Pro version. |
| Primary Content — Source | Options: Text; Image. |
| Primary Content — Content | Wysiwyg inspector control (`kng_primary_content`). |
| Primary Content — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Primary Content — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Secondary Content — Source | Options: Text; Image. |
| Secondary Content — Content | Wysiwyg inspector control (`kng_secondary_content`). |
| Secondary Content — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Secondary Content — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Toggle — Toggle Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 64). |
| Toggle — Switch Width | Spacing/size control (min 80, max 200). |
| Toggle — Switch Height | Spacing/size control (min 28, max 80). |
| Toggle — Track | Color written to this widget’s CSS selector. |
| Toggle — Track Active | Color written to this widget’s CSS selector. |
| Toggle — Thumb | Color written to this widget’s CSS selector. |
| Toggle — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-toggle__switch`. |
| Toggle — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-content-toggle__switch`. |
| Toggle — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-toggle__label`. |
| Toggle — Label | Writes CSS `color` onto the widget’s front-end markup. |
| Toggle — Label Active | Writes CSS `color` onto the widget’s front-end markup. |
| Content Area — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-content-toggle__pane`. |
| Content Area — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-content-toggle__pane`. |
| Content Area — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Content Area — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content Area — Content Gap | Writes CSS `gap` onto the widget’s front-end markup. (min 0, max 48). |
| Content Area — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-content-toggle__pane`. |
| Content Area — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-content-toggle__pane`. |
| Content Area — Text | Writes CSS `color` 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
What does Content Toggle actually change on the page?
Content Toggle is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Content Toggle” in the Elementor panel. Inspector labels from this widget’s PHP include “Primary Label”, “Secondary Label”, “Default State”, “Alignment”.
How do I add Content Toggle in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Content Toggle”, 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
Unfold
Unfold is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Unfold” in the Elementor panel.
Announcement / Promo Bar
Announcement / Promo Bar is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Announcement / Promo Bar” in the Elementor panel.
Comparison Matrix Cards
Comparison Matrix Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Comparison Matrix Cards” in the Elementor panel.
Cookie Preferences Button
Cookie Preferences Button is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Cookie Preferences Button” in the Elementor panel.
Custom Post Types Grid
Custom Post Types Grid is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Custom Post Types Grid” in the Elementor panel.
Custom Post Types Slider
Custom Post Types Slider is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Custom Post Types Slider” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Content Toggle after you activate it.