change which toggle is selected on page load - html

Question

I'm trying to figure out a solution where i can select which toggle is displayed on page load. At the minute, when the page loads, it is set to Pay Annually. How would i change my code so that it is set to Pay Monthly on page load?. I want the ability to quickly swap them for a/b tests.
I've attached my CodePen also - CodePen
$(document).ready(function() {
var checkBoxes = $("input[name='toggle']");
toggle();
$("#toggle").click(function() {
toggle();
});
function toggle() {
if (checkBoxes.prop("checked")) {
$('#coreMonthlyText,#coreMonthlyPrice').show();
$('#coreAnnuallyText,#coreAnnuallyPrice').hide();
} else {
$('#coreMonthlyText,#coreMonthlyPrice').hide();
$('#coreAnnuallyText,#coreAnnuallyPrice').show();
}
}
});
.pricing-box {
background: red;
padding: 25px;
width: 30%;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.toggle-switch {
cursor: pointer;
background-color: gray;
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: 0.75rem;
padding-bottom: 0.75rem;
}
.toggle-switch span {
border-width: 2px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.toggle-switch input:checked+span+span,
.toggle-switch input+span {
border-color: #444;
background-color: white;
}
.toggle-switch input+span+span,
.toggle-switch input:checked+span {
background-color: transparent;
border-color: transparent;
}
#coreMonthlyText,
#coreMonthlyPrice,
#coreAnnuallyText,
#coreAnnuallyPrice {
display: none;
}
#proMonthlyText,
#proMonthlyPrice,
#proAnnuallyText,
#proAnnuallyPrice {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-box">
<div class="row">
<div class="column">
<div class="core">
<h2>Core</h2>
</div>
</div>
<div class="column">
<div id="coreAnnuallyPrice" class="coreAnnuallyPrice">
$2,399/yr<br /> Normally $3,588/yr
</div>
<div id="coreMonthlyPrice" class="coreMonthlyPrice">
$299/pm<br /> first 2 months free
</div>
</div>
</div>
<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>