Move 2 toggles switches at same time - html

Question

I have 2 pricing plan boxes with toggles for monthly and annual pricing. When i click Pay monthly on the Core box, all the numbers change correctly, but what i would like to do is to click either core or pro, and then both move. At the moment, only the Core toggle moves. See the code below, and link to the demo on my staging site.
jQuery
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice,#proMonthlyText,#proMonthlyPrice').show();
$('#coreAnnuallyText,#coreAnnuallyPrice,#proAnnuallyText,#proAnnuallyPrice').hide();
} else {
$('#coreMonthlyText,#coreMonthlyPrice,#proMonthlyText,#proMonthlyPrice').hide();
$('#coreAnnuallyText,#coreAnnuallyPrice,#proAnnuallyText,#proAnnuallyPrice').show();
}
}
});
HTML
<div class="pricing-box" id="core-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core Plan</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
<h2>$2,399/yr</h2> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
<h2>$99/pm</h2> first 2 months free
</div>
</div>
</div><div class="center_text">
<label for="toggle" class="toggle-switch"><input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="coreAnnuallyPrice,coreAnnuallyText" data-not-checked="coreMonthlyPrice,coreMonthlyText"><span>Pay annually</span><span>Pay monthly</span>
</label>
</div></div>
<div class="pricing-box" id="pro-box">
<div class="row">
<div class="column">
<div class="pro">
<h2>Pro Plan</h2>
</div>
</div>
<div class="column">
<div id="proAnnuallyPrice" class="proAnnuallyPrice">
<h2>$4,199/yr</h2> Normally $5,988/yr
</div>
<div id="proMonthlyPrice" class="proMonthlyPrice">
<h2>$299/pm</h2> first 2 months free
</div>
</div>
</div><div class="center_text">
<label for="toggle" class="toggle-switch"><input class="toggle-button" id="toggle" type="checkbox" name="toggle" data-checked="proAnnuallyPrice,proAnnuallyText" data-not-checked="proMonthlyPrice,proMonthlyText"><span>Pay annually</span>.
<span>Pay monthly</span>
</label>
</div>
</div>
CSS
.toggle-switch {
cursor: pointer;
background-color: #F8F8F9;
display: inline-block;
border: 0;
padding-left: 0;
padding-right: 0;
}
.toggle-switch input {
display: none;
}
.toggle-switch,
.toggle-switch span {
border-radius: 35px;
border-style: solid;
border-color: transparent;
padding-top: 20px;
padding-bottom: 20px;
}
.toggle-switch span {
border-width: 2px;
padding-left: 20px;
padding-right: 20px;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border: 1px solid #00AEEF !important;
background-color: white !important;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: #F8F8F9 !important;
border-color: transparent !important;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
#proMonthlyText,
#proMonthlyPrice,
#proAnnuallyText,
#proAnnuallyPrice {
display: none;
}
Link to webpage

Answer 1

You have duplicate IDs, which will cause problems. You can have duplicate name="toggle" but you likely need to distinguish them somehow.
The main problem is that the state of the toggle changes automatically and you never set the state of the other. It is important to know which one was clicked.
Hence, to keep them "in sync", you can set both toggles to the state of the one that was clicked:
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle(checkBoxes.el(0)); // pass first checkbox for initial state
checkBoxes.click(function(event) {
toggle(event.target);
});
function toggle(target) {
var checked = $(target).prop('checked')
// set all checkboxes to the same state
checkBoxes.prop('checked', checked)
// set other properties based on checked state
$('#coreMonthlyText,#coreMonthlyPrice,#proMonthlyText,#proMonthlyPrice')
.toggle(checked)
$('#coreAnnuallyText,#coreAnnuallyPrice,#proAnnuallyText,#proAnnuallyPrice')
.toggle(!checked)
}
});