How to add Toggle to pricing table in Elementor

Facebook
Email
WhatsApp

Custom CSS for toggle

				
					selector{
--inactive-color: #E2E2E2;
--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);
}
				
			

CSS Classes for section 1

				
					pricing-tables pricing-tables-1
				
			

CSS class for section 2

				
					pricing-tables pricing-tables-2
				
			

css class for toggle

				
					price-toggle
				
			

HTML CODE

				
					<style>
.pricing-tables-1{
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>
				
			
Hostinger domain & hosting ireland