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

	
<script>
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;
        toBeShown.style.display = 'none';
        e.addEventListener('change', function(){
            if (e.checked){
            shown.style.display = 'none';
            toBeShown.style.display = 'block';
            } else {
            shown.style.display = 'block';
            toBeShown.style.display = 'none';
            }
        });
    });
}
</script>
<style>
   /* 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;
   }
</style>

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!

Comments

5 Responses

  1. Hey Great tutorials. I think there's a bug in the code. The switcher is not displaying at all. When I set the opacity to 1 I see a little checkbox in its natural form. What might be the problem ?

    1. Thanks!

      I just tested the code and it is still working fine! Maybe you have some other CSS on your page that is intererring with my code, something that would change the display value of label elements, for example.

  2. Hi, nice work, but how can I make it for specific (class or ID) on website? I want changing price and more. So I want have switcher on left side and on right side - pricelist.

    Is it possible?

    1. Goal of the tutorial was to be very simple... so to get what you want, follow the tutorial, and use two complete inner sections with anything you want in them to be changed!

Leave a Reply