I am trying to create a pricing plan landing page, and am wanting the text to appear/disappear when the toggle button is selected to determine whether to show monthly or annual pricing. Here’s the code I’m currently using that isn’t working. Any thoughts or help?
In the code box:
<label class="switch">
<input type="checkbox" id="pricingToggleSwitch">
<span class="slider round"></span>
</label>
In the scripts <body> section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// Replace with ID of your pricing toggle switch
var pricingToggle = $("lp-pom-button-5929");
// Replace with the IDs of your not-for-profit and normal pricing sections
var notForProfitPricing = $("#lp-pom-text-7078");
var normalPricing = $("#lp-pom-text-6796");
// Show not-for-profit pricing and hide normal pricing by default
notForProfitPricing.show();
normalPricing.hide();
// Toggle the pricing sections when the toggle switch is changed
pricingToggle.change(function() {
var isToggleActive = $(this).prop("checked");
if (isToggleActive) {
// Show not-for-profit pricing and hide normal pricing
notForProfitPricing.show();
normalPricing.hide();
} else {
// Show normal pricing and hide not-for-profit pricing
notForProfitPricing.hide();
normalPricing.show();
}
});
});
</script>