Membership Options
Choose Your Membership
selector{
–inactive-color: #3e6bbc;
–padding: 5px;
–size: 23px;
}
selector.monthly .elementor-widget-container{
background: var(–inactive-color);
}
selector .elementor-divider{
position: relative;
cursor: pointer;
}
selector .elementor-divider:after{
content: “”;
position: absolute;
top: var(–padding);
left: calc(100% – var(–size) – var(–padding));
height: var(–size);
width: var(–size);
background: #fff;
border-radius: 100%;
transition: all 0.3s ease-in-out;
}
selector.monthly .elementor-divider:after{
left: var(–padding);
}
selector {
–inactive-color: #3e6bbc;
–active-color: #00cc00; /* Change this to your desired active color */
–padding: 5px;
–size: 23px;
}
selector.monthly .elementor-widget-container {
background: var(–active-color);
}
selector.annual .elementor-widget-container {
background: var(–active-color); /* Change this to your desired active color */
}
selector .elementor-divider {
position: relative;
cursor: pointer;
}
selector .elementor-divider:after {
content: “”;
position: absolute;
top: var(–padding);
left: calc(100% – var(–size) – var(–padding));
height: var(–size);
width: var(–size);
background: #fff;
border-radius: 100%;
transition: all 0.3s ease-in-out;
}
selector.monthly .elementor-divider:after {
left: var(–padding);
}
selector.annual .elementor-divider:after {
left: calc(50% – var(–size) / 2);
}
document.addEventListener(“DOMContentLoaded”, function() {
const toggle = document.querySelector(‘selector .elementor-divider’);
const section1 = document.querySelector(‘.pricing-tables-1’); // Replace ‘.section1’ with the selector of your first section
const section2 = document.querySelector(‘.pricing-tables-2’); // Replace ‘.section2’ with the selector of your second section
const section3 = document.querySelector(‘.pricing-tables-3’); // Replace ‘.section3’ with the selector of your third section
// Initial state
toggle.classList.add(‘monthly’); // Set initial active state
section1.style.display = ‘block’; // Show section1
section2.style.display = ‘none’; // Hide section2 initially
section3.style.display = ‘none’; // Hide section3 initially
// Toggle function
toggle.addEventListener(‘click’, function() {
if (toggle.classList.contains(monthly’)) {
toggle.classList.remove(‘monthly’);
toggle.classList.add(‘annual’);
section1.style.display = ‘none’; // Hide section1
section2.style.display = ‘block’; // Show section2
section3.style.display = ‘none’; // Hide section3
} else if (toggle.classList.contains(‘annual’)) {
toggle.classList.remove(‘annual’);
toggle.classList.add(‘lifetime’);
section1.style.display = ‘none’; // Hide section1
section2.style.display = ‘none’; // Hide section2
section3.style.display = ‘block’; // Show section3
} else { // If toggle has class ‘lifetime’
toggle.classList.remove(‘lifetime’);
toggle.classList.add(‘monthly’);
section1.style.display = ‘block’; // Show section1
section2.style.display = ‘none’; // Hide section2
section3.style.display = ‘none’; // Hide section3
}
});
});
<style>
.x: pricing-tables-2{
display: none;
}
</style>
<script src=”https://code.jquery.com/jquery-3.6.0.js”></script>
<script>
var $ = jQuery
$(document).ready(function(){
$(‘.price-toggle’).on(‘click’, function(){
$(this).toggleClass(‘monthly’)
$(‘.pricing-tables’).toggle()
})
})
</script>