I have 2 days experience with HTML, CSS and JS on front-end development.
After reading lots I have been able to do the following. The thing is that it is refreshing when selecting the Monthly, but not on the Yearly, which is the one selected from the beginning.
This is the code I have been working on:
const switchMonthly = document.getElementById('switchMonthly');
const switchYearly = document.getElementById('switchYearly');
const flexy = document.getElementById('flexy');
switchMonthly.addEventListener('change', e => {
flexy.classList.toggle('show-annually');
flexy.classList.toggle('show-monthly');
})
switchYearly.addEventListener('change', e => {
flexy.classList.toggle('show-monthly');
flexy.classList.toggle('show-annually');
}).show-monthly .price-box .monthly {
display: none;
}
.show-monthly .price-box .annually {
display: block;
}
.show-annually .price-box .monthly {
display: block;
}
.show-annually .price-box .annually {
display: none;
}<input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" />
<input type="radio" id="switchYearly" name="switchPlan" value="Yearly" checked="checked" />
<label for="switchMonthly">Monthly</label>
<label for="switchYearly">Yearly</label>
<div class="switch-wrapper">
<div class="switch">
<div>Monthly</div>
<div>Yearly</div>
</div>
</div>
</div>
<div id="flexy" class="flex">
<div class="price-box">
<p>
<span class="monthly">
19.99
</span>
<span class="annually">
199.99
</span>
</p>
</div>
</div>As expressed, the problem is that on the "yearly" it always shows both pricing options.
The issue is that you're only toggling the classes on and off when the radio buttons change. But since your div.flexy doesn't have a starting class, it just turns both .show-monthly and .show-annually on and off together.
Just give your .flexy div a starting class and it should work
Edit: also make sure that you give the corresponding radio button the checked attribute to start with the correct button checked at first.