Super Simple Elementor Content Switcher

Table of Contents

In this article we will learn how to implement a Content Switcher in Elementor very easily.

The content switcher toggles between two different elements (or inner sections) for displaying each content at a time.

First, copy paste this code in an HTML element, at the end of your page

If you would like the functionality available on every page of your website, it could also be in the footer template.

Super Simple Elementor Content Switcher 1

if (!(document.querySelector('.elementor-editor-active'))){
    let toggleSwitches = document.querySelectorAll('.toggle_switch'); 
    toggleSwitches.forEach((e,i) => {
        let shown = e.closest('.elementor-element').nextElementSibling;
        let toBeShown = shown.nextElementSibling; = 'none';
        e.addEventListener('change', function(){
            if (e.checked){
   = 'none';
   = 'block';
            } else {
   = 'block';
   = 'none';
   /* css for the toggle all switch */
   .toggle_switch {
   opacity: 0;
   .toggle_switch::-moz-selection, .toggle_switch:after::-moz-selection, .toggle_switch:before::-moz-selection, .toggle_switch *::-moz-selection, .toggle_switch *:after::-moz-selection, .toggle_switch *:before::-moz-selection, .toggle_switch + .toggle_switch-button::-moz-selection {
   background: none;
   .toggle_switch::selection, .toggle_switch:after::selection, .toggle_switch:before::selection, .toggle_switch *::selection, .toggle_switch *:after::selection, .toggle_switch *:before::selection, .toggle_switch + .toggle_switch-button::selection {
   background: none;
   .toggle_switch + .toggle_switch-button {
   outline: 0;
   display: block;
   width: 4em;
   height: 2em;
   position: relative;
   cursor: pointer;
   left: 50%;
   transform: translateX(-50%);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   .toggle_switch + .toggle_switch-button:after, .toggle_switch + .toggle_switch-button:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
   .toggle_switch + .toggle_switch-button:after {
   left: 0;
   .toggle_switch + .toggle_switch-button:before {
   display: none;
   .toggle_switch:checked + .toggle_switch-button:after {
   left: 50%;
   .toggle_switch-ios + .toggle_switch-button {
   background: #808285;
   border-radius: 2em;
   padding: 2px;
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
   border: 1px solid #e8eae9;
   .toggle_switch-ios + .toggle_switch-button:after {
   border-radius: 2em;
   background: #fbfbfb;
   -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
   .toggle_switch-ios + .toggle_switch-button:hover:after {
   will-change: padding;
   .toggle_switch-ios + .toggle_switch-button:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
   .toggle_switch-ios + .toggle_switch-button:active:after {
   padding-right: .8em;
   .toggle_switch-ios:checked + .toggle_switch-button {
   background: #5BCBF5;
   .toggle_switch-ios:checked + .toggle_switch-button:active {
   box-shadow: none;
   .toggle_switch-ios:checked + .toggle_switch-button:active:after {
   margin-left: -.8em;

Then, add an HTML element right before the two elements you want to switch

Copy paste this code in an HTML element that is placed right before the two elements you will want to toggle visibility. In the screenshot, it is placed right before two inner sections, for example.

Super Simple Elementor Content Switcher 2

<input id="content_switcher" class="toggle_switch toggle_switch-ios" type="checkbox" /> 
<label class="toggle_switch-button" tabindex="0" for="content_switcher"></label>

It can work with any elements, not just inner sections. Whichever two elements follow the html element, will be toggled.

That's all! Enjoy your content switcher!

Except if you want more than one on the same page! Then keep reading!

For all extra content switchers you will want on the same page, simply duplicate the HTML element that has the checkbox input and label, and move it to it's desired location.

Then, edit it slightly to make the ID unique, and to make the FOR match that new ID. For example, just add a '_2', to make them 'content_switcher_2'. And change them to 'content_switcher_3', for the third switcher on the page, etc.

Super Simple Elementor Content Switcher 3


This download gets you the following template :

Elementor Simple Content Switcher Template

Related tutorial : Elementor Simple Content Switcher

Name your price $

Thanks for reading! Let me know if it works fine for you!

To see the comments, click 'accept all' in the Cookie settings (lower right sticky icon). Then refresh the page.

If you still don't see the comments, try using Chrome or Edge, as you probably you have an adblock or a browser such as Firefox or Brave.