Creating a Toggle Button with Elementor Pro - The CSS & Javascript Code

toggle-button.css

/*
  This is the CSS code for creating your own Toggle Button Widget using
  Elementor Pro. 
  
  You still need the Javascript code for this to work.
  
  The Youtube tutorial is here. Make sure you watch this to understand
  how this works.
  https://youtu.be/ZhBGPIU1bq0
  
  Don't forget to checkout my Fiverr account for Gigs related to WordPress
  and Elementor -- https://fiverr.com/kidino
*/

/* -- CSS for button -- */

selector {
    pointer-events: none;
    transition: ease-in 0.2s;
}

selector a {
    width: 100%;
}

/* -- CSS for Option A and Option B -- */
selector {
    pointer-events: none;
}

/* -- CSS for Inner Section Column -- */
selector {
    cursor: pointer;
}

toggle-button.html

<script>

/*
  This is the Javascript for creating your own Toggle Button Widget using
  Elementor Pro. 
  
  You still need the CSS code for this to work. This code goes into an HTML
  Widget that you put under your Inner Section for your Toggle Button.
  

  The Youtube tutorial is here. Make sure you watch this to understand
  how this works.
  https://youtu.be/ZhBGPIU1bq0
  
  Don't forget to checkout my Fiverr account for Gigs related to WordPress
  and Elementor -- https://fiverr.com/kidino
*/

/* 
--- JAVASCRIPT FOR CLICK EVENT TRIGGER --- 
This code goes into a HTML widget
*/    

window.addEventListener("load", function(){
    
	// update with the correct CSS ID for your monthly package section
    var monthly = document.getElementById('monthly-package');
	
	// update with the correct CSS ID for your yearly package section
    var yearly = document.getElementById('yearly-package');
	
	// update with the correct CSS ID for the column of your toggle button
    var btn01 = document.getElementById('toggle-01');
    
    yearly.style.display = 'none';
    
    btn01.addEventListener("click",function(){
		// toggle_button( <button object>, <section object 1>, <section object 2> );
        toggle_button(btn01, monthly, yearly);
    });
});


/* 
--- JAVASCRIPT FOR MAIN FUNCTION --- 
you can create this in a separate HTML widget.
*/    
function toggle_button(btn, el1, el2){

    var sw = btn.getElementsByClassName('elementor-widget-button')[0];
    
    if ((sw.style.left == '0px') || (sw.style.left == '')) {
        sw.style.left = '90px';
    } else {
        sw.style.left = '0px';
    }
    
    if (el1.style.display == 'none') {
        el1.style.display = 'block';
        el2.style.display = 'none';
    } else {
        el1.style.display = 'none';
        el2.style.display = 'block';
    }
}

</script>