Super Simple Elementor Content Switcher

Super Simple Elementor Content Switcher

Just launched! Checkout the CSS Course for Elementor users.

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, credits: https://codepen.io/mallendeo/pen/QWKrEL */
   .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>

Toggle CSS credits: this codenpen.

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

 

Elementor Simple Content Switcher Template

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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

14 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!

    1. Hey Chris!

      Yes. In there code, there are two instances of 'nextElementSibling'. Change them both to 'previousElementSibling', and it will work the way you want!

  3. Hello dear, first thanks for this nice tutorial,

    but can you please help me to improve the code and make it work with session storage ?
    I mean if the user click on the switch button the status of the switched widget will be saved during all the session of the website.

    for exemple If user switch the button on ON and exit the page, and when he back again to this page , it will become always ON without need of click to the switch again !!

    I hope you understand me, Thanks in advance

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.