How to Create a Content Switcher in Elementor

Creating a custom content switcher without additional plugins in Elementor required can be achieved by using the steps in this tutorial.


Setting Up The Page

In order to create a custom content switcher, we must first set up our page with some CSS and Js files needed.

Toggle Button Script

  1. Drag an HTML Widget on to your page at the bottom
  2. Place this code between script tags
if (!(document.querySelector('.elementor-editor-active'))){
    let contentSwitcher = document.querySelectorAll('.content_switcher'); 
    contentSwitcher.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';
            }
        });
    });
}

Example:

Tip: This can additionally be placed in the footer section to be used globally.

CSS For Toggle Button

Place this CSS code in your Site Settings > Additional CSS or preferred location. The colors and positioning of the toggle can be changed as needed.


.content_switcher {
   opacity: 0;
   }
   .content_switcher::-moz-selection, .content_switcher:after::-moz-selection, .content_switcher:before::-moz-selection, .content_switcher *::-moz-selection, .content_switcher *:after::-moz-selection, .content_switcher *:before::-moz-selection, .content_switcher + .content_switcher-button::-moz-selection {
   background: none;
   }
   .content_switcher::selection, .content_switcher:after::selection, .content_switcher:before::selection, .content_switcher *::selection, .content_switcher *:after::selection, .content_switcher *:before::selection, .content_switcher + .content_switcher-button::selection {
   background: none;
   }
   .content_switcher + .content_switcher-button {
   outline: 0;
   display: block;
   width: 4em;
   height: 2em;
   position: relative;
   cursor: pointer;
   left: 34px;
   transform: translateX(-5%);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   }
   .content_switcher + .content_switcher-button:after, .content_switcher + .content_switcher-button:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
   }
   .content_switcher + .content_switcher-button:after {
   left: 0;
   }
   .content_switcher + .content_switcher-button:before {
   display: none;
   }
   .content_switcher:checked + .content_switcher-button:after {
   left: 50%;
   }
   .content_switcher-ios + .content_switcher-button {
   background: #333
;
   border-radius: 2em;
   padding: 2px;
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
   border: 2px solid #666;
   }
   .content_switcher-ios + .content_switcher-button:after {
   border-radius: 2em;
   background: #fff;
   -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);
   }
   .content_switcher-ios + .content_switcher-button:hover:after {
   will-change: padding;
   }
   .content_switcher-ios + .content_switcher-button:active {
   box-shadow: inset 0 0 0 2em #e8eae9;
   }
   .content_switcher-ios + .content_switcher-button:active:after {
   padding-right: .8em;
   }
   .content_switcher-ios:checked + .content_switcher-button {
   background: #999
;
   }
   .content_switcher-ios:checked + .content_switcher-button:active {
   box-shadow: none;
   }
   .content_switcher-ios:checked + .content_switcher-button:active:after {
   margin-left: -.8em;
   }

Creating The Section

On your page, create a single column section by clicking on the + icon.

Toggle Button HTML

Place this code into an HTML widget at the top of the section. If you set up the CSS and JS code correctly, you should now see a toggle switch in your section.

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

Adding the Content

The toggle code we have inserted will use the two elements directly below it. You may use any desired widget, or use two inner sections with content inside for groups of content to switch

Example Using Two Images:

Example Using Two Inner Sections:

In this example, a Z-Index and Negative Bottom Margin were applied to the HTML widget to have the effect of being within the display region.

Note: The switcher effect will not show in the editor. You must view it in a new browser tab.

Publish and View

That is it. You can now view your content switcher in a new tab to see it in action.

Additional Content Switchers

If you need to use more than one switcher on the page, you must give each a new ID.

Example:

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

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email
Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

Want to learn from Elementor Web creators?

Join Our New Community Hub!