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.
<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.
<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.
Elementor Simple Content Switcher Template
This download gets you the following template :
Elementor Simple Content Switcher Template
Related tutorial : Elementor Simple Content Switcher
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.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
16 Responses
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 ?
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.
Legend! Thanks!
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?
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!
Hi Maxime, could this work with Elementor templates?
Great tutorial, thx!
Hey Doug!
Well, kind of yes... You could have two 'shortcodes' elements after the toggle, both linking to your templates!
Very cool, thx again MX!
cheers
Is it possible to have the toggle show under the elements you want to switch, instead of above them?
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!
Perfect... thanks!!!
Exactly what I was looking for, thanks for the amazing work as always.
Welcome!
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
Very thanks for this code. This is more useful to me. Thanks a lot...
Welcome Siva!