Skip to content

Instantly share code, notes, and snippets.

@stoffl6781
Forked from kidino/toggle-button.css
Created June 22, 2021 19:32
Show Gist options
  • Save stoffl6781/508e68203c504b1f55dea506f76395cf to your computer and use it in GitHub Desktop.
Save stoffl6781/508e68203c504b1f55dea506f76395cf to your computer and use it in GitHub Desktop.
Creating a Toggle Button with Elementor Pro - The CSS & Javascript Code
/*
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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment