Elementor Content Toggle Widget for Switching Sections (Pro)
Toggle Content is a Master Addons Pro widget that puts a switch above (or below) a block of content. Visitors click a label and the content under it changes, the way a Billed Monthly and Billed Yearly switch changes a set of pricing cards. Each option can hold text you type or a saved Elementor section, page or widget template, and you can add as many options as you like. A colored indicator slides behind the active label. It is a switch between content sets rather than an expand and collapse list, so for collapsible FAQs use Advanced Accordion instead.
How to Add a Content Toggle in Elementor
Toggle Content needs Elementor and an active Master Addons Pro license. If an option should show a full layout, save that layout as a template first.
- Save the sections you want to switch between (for example Monthly Pricing and Yearly Pricing) as Elementor templates.
- Edit your page with Elementor, search the widgets panel for Toggle Content and drag it into place.
- In Elements, rename Label One and Label Two, and add more items if you need them.
- For each item, set Type to Content and write the text, or set it to Template and choose the saved section, page or widget.
- In Toggle Settings, choose the Active Index, put the switch Before or After the content, and set Indicator Speed.
- Style the Toggler, Indicator and Labels, set Stack On for mobile, then preview and click each label.
Every setting is covered in the Toggle Content widget settings guide.
Text or a Saved Template in Each Option
Every item in the Elements repeater is one option on the switch. Give it a Label and an optional Icon (before or after the label, with Icon Spacing). Then set Type to Content for a text editor with media and dynamic tags, or to Template and choose a saved Section, Page or Widget from your Elementor library.
- Build the monthly and yearly pricing tables as two saved sections, then point one option at each.
- A form, a gallery or any other widget can sit in an option once it is saved as a template.
- Each option has its own Label Color, Active Label Color and Indicator Color in its Style sub-tab.
Style the Toggler, Indicator and Labels
The Toggler section styles the switch track: Style (Round or Square), Background Color, Border Radius, Align, Zoom to scale it, Width (%), Border, Box Shadow, Padding and Margin. Indicator styles the sliding highlight with its own background, height, width, border radius, box shadow and padding. Labels sets typography, a transition, Space Between, and colors for the Default, Hover and Active states.
- A Content section styles the panel below with typography, padding, margin, border, color and background.
- Indicator Speed sets how long the slide takes, 0.3 seconds by default.
- The content panel itself swaps straight away. Only the indicator slides.
Default Option, Position and Mobile Layout
Active Index picks the option that shows when the page loads, 1 for the first. Position puts the switch Before or After the content. On small screens, Stack On (All, Tablet & Mobile, or Mobile) turns the row of labels into a vertical list, with separate Inline Align and Stacked Align controls.
- With two options, clicking the active label flips to the other one, so it works like an on and off switch.
- With three or more, clicking the active label moves on to the next option.
- The page does not remember the choice, so every visit starts on the Active Index option.
Content Toggle vs Accordion vs Tabs in Elementor
All three save space, but they solve different problems. Elementor’s old Toggle widget is a collapsible list, and Elementor now hides it from the panel in favor of Accordion. Neither Elementor nor Elementor Pro has a switch that swaps one content set for another, which is the job Toggle Content does.
| Widget | What visitors see | Best for | Where to get it |
|---|---|---|---|
| Toggle Content | A switch with labels. One content set shows at a time. | Monthly and yearly pricing, personal and business plans, two versions of a section | Master Addons Pro |
| Accordion | A stack of titles that expand and collapse | FAQs and long lists of short answers | Elementor Accordion (free) or Advanced Accordion (free) |
| Tabs | A row of tab titles over a content area | Several sections of similar weight, like Features, Specs and Reviews | Elementor Tabs (free) or Advanced Tabs (free) |
If visitors need to see several answers at once, use an accordion. If there are many sections, tabs are clearer. When the choice is between two or three versions of the same thing, a content toggle keeps the layout steady and makes the choice obvious. It also pairs well with the Pricing Table widget.
Frequently Asked Questions For Toggle Content
Is Toggle Content free?
No. Toggle Content is a Pro widget and needs a Master Addons Pro license. The free plugin has Advanced Accordion and Advanced Tabs, which cover collapsible lists and tabbed sections.
Can I use my saved Elementor templates inside a toggle?
Yes. In an item, set Type to Template, choose Section, Page or Widget in Template Type, then pick the saved template. That option shows the whole template when its label is active.
How is a content toggle different from an accordion or tabs?
An accordion expands and collapses items in a list, and tabs show a row of titles over one content area. A content toggle is a switch that swaps one whole content set for another, which suits choices like monthly or yearly pricing. Elementor’s own Toggle widget is really a collapsible list and is now hidden in favor of Accordion.
How does it behave on mobile?
The labels sit in a row by default. Set Stack On to Mobile, Tablet & Mobile, or All to stack them vertically, and use Stacked Align to line them up. Template content follows its own responsive settings.
Can I have more than two toggle options?
Yes. Click Add Item in the Elements repeater to add more. With three or more options, clicking the active label moves to the next one, and clicking any other label jumps straight to it. For many sections, tabs are usually easier to scan.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
