Atomic Element · Free
Put full pricing cards in two panes and let visitors flip between them with tabs, a knob switch or a sliding pill. Built for Elementor 4, free on Elementor Free.
The short answer
The Toggle Switcher is the Elementor content toggle and pricing toggle from Animation Addons, built as an Elementor 4 Atomic Element. A two-option control (tabs, a knob switch or a sliding pill) swaps between two Toggle Panes. Each pane is an open container, so it can hold anything from one paragraph to a full row of pricing cards.
Many "Elementor V4 compatible" addons are classic v3 widgets. The Animation Addons for Elementor Toggle Switcher is a native Atomic Element that takes Classes and Variables.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (open container) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Default: Toggle Switcher Tabs > 2 Toggle Switcher Tabs, plus 2 Toggle Panes (each starts with a title and description). Switch and pill designs: Tablist > Label, Track > Knob, Label |
| Control styles | Underlined tabs (default); switch with track and knob, and sliding pill, from Apply Preset |
| States | Selected state on tabs, labels, track and knob, styled in the Style tab |
| Panes | Exactly two; the first pane always shows on page load |
| Keyboard | Default tabs are real buttons and work with Tab and Enter. The switch and pill designs are mouse and touch only |
| SEO | Both panes are in the page HTML; the inactive one is hidden with CSS |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Toggle Switcher and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
"Monthly" and "Yearly" labels either side of a small knob switch with a "2 months free" note; below, three plan cards that change price when toggled.
A rounded pill where a highlight slides behind "Startups" or "Enterprise"; each side shows its own package list and a "Book a call" button.
Two underlined text tabs over a photo-left, service-list-right layout with a booking button.
A compact "cm | in" switch above a spec table; both panes hold the same table in different units.
Large serif "Lunch" and "Dinner" tabs on cream; each pane is a two-column menu with an Accordion of allergen notes.
A "Light | Dark" switch whose track turns dark when "Dark" is active; each pane shows the template screenshot and a "Live preview" button.
Features
Every option below is a real control in the Toggle Switcher panel or part of how the element renders. Nothing here needs custom code.
Each Toggle Pane accepts any atomic element: grids, headings, images, buttons, icon lists, accordions, forms. Build a full pricing table in each pane with the elements you already use.
Out of the box you get underlined text tabs. Apply Preset swaps in a switch with labels either side of a track and knob, or a sliding pill where a highlight moves behind the active label.
Tabs, labels, the track and the knob each have a Selected state in the Elementor 4 Style tab, so the active side can change colour, weight or background without custom CSS.
Click the control in the editor to show the second pane and build it in place.
Built on the atomic base
Why it mattersThe control and the content are separate elements, so you restyle the switch with a Class and build each pane like any other section.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall and activate Animation Addons for Elementor, then open a page in Elementor with the Atomic Editor on.
Find Toggle Switcher in the Elements panel and drag it onto the canvas. It drops in with Monthly and Yearly tabs and two panes.
Optional: open Presets and use Apply Preset to switch to the knob switch or sliding pill design.
Edit the two tab or label texts.
Click the toggle to show each pane and build its content: replace the default title and description with pricing cards or any elements.
Style the Selected state of the tabs, labels, track and knob, check mobile and publish.
Honest comparison
Elementor Free includes an Atomic Tabs element that can also switch content.
| Feature | Elementor Atomic Tabs | Animation Addons Toggle Switcher |
|---|---|---|
| Requires Elementor Pro | No | No |
| Number of panels | Multiple tabs | Two, by design |
| Control style | Tab triggers you fill with any content | Underlined tabs, knob switch or sliding pill |
| Panels accept any atomic content | Yes | Yes |
| Selected state styling | Yes | Yes, on tabs, labels, track and knob |
Compared with Elementor 4.3.3 (September 2026).
Use Atomic Tabs for three or more sections. Use the Toggle Switcher when the visitor is choosing between two options and you want a switch or pill instead of tabs.
Who it's for
The people who get the most out of it, and what they use it for.
Offering monthly and yearly billing.
Presenting two package tiers.
Switching specs between units.
Showing two menus in one section.
FAQ
Install the free Animation Addons for Elementor plugin and drag the Toggle Switcher onto your page. The Animation Addons Toggle Switcher starts with Monthly and Yearly tabs and two panes. Build the monthly pricing cards in the first pane and the yearly cards in the second. Visitors click the toggle to swap them.
Yes. The Animation Addons Toggle Switcher is free and works on Elementor Free with the Atomic Editor on. Each pane is an open container, so you can build pricing cards with native Elementor 4 elements such as Heading, Paragraph, Grid and Button, plus free Animation Addons elements like Icon List.
Select the Animation Addons Toggle Switcher, open Presets and choose the switch design in Apply Preset. It replaces the tabs with a label on each side of a track and knob. For a coloured highlight that slides behind the active label, choose the sliding pill design instead.
The Animation Addons Toggle Switcher always shows the first pane on page load; there is no setting to pick a default pane. To show yearly prices first, put the yearly content in the first pane and swap the two label texts so the control still matches the content.
In the default tabs style, yes: each Animation Addons Toggle Switcher tab is a real button that keyboard users reach with Tab and activate with Enter or Space, and the active tab reports aria-selected. The switch and sliding pill designs are clickable labels that are not keyboard-focusable, so use the default tabs where keyboard access matters.
Yes. Both panes of the Animation Addons Toggle Switcher are in the page HTML when it loads; the inactive pane is only hidden with CSS. Search engines and AI crawlers can read both sets of prices. Keep your most important pricing message in the first pane, since that is what visitors see first.
No. The Animation Addons Toggle Switcher loads one small script and stylesheet only on pages that use it. Switching panes is a class change with no animation library, and the knob and pill slides are CSS transforms. It needs no Elementor Pro and no Animation Addons Pro.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Toggle Switcher on the same page or template.
A free, native Elementor 4 pricing and content toggle with tabs, switch and pill styles.
