Show hide Div based on toggle Switch

Question

I'm trying to make a toggle switch work, which will show/hide classes based on if it is checked or unchecked. By default i want to show "pay annually" so it will display the annual price, also a text blub further down the page. If i click "pay monthly" it will display the monthly price, and a monthly text blurb further down the page.

I tried to follow some solution, but at the moment all are showing, and nothing toggles. How can i fix this?

link to codepen

function showHide(e) {
  const el = e.target;

  if (el.checked) {
    el.dataset.checked.split(',').forEach(fld    => document.getElementById(fld).parentNode.style.display = 'block');
    el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'none' );
} else {
   el.dataset.checked.split(',').forEach(fld    => document.getElementById(fld).parentNode.style.display = 'none' );
   el.dataset.notChecked.split(',').forEach(fld => document.getElementById(fld).parentNode.style.display = 'block');
 }
}

Answer 1

Using jQuery :

$(document).ready(function() {
  var checkBoxes = $("input[name='toggle']");
  toggle();
  $("#toggle").click(function() {
    toggle();
  });

  function toggle() {
    if (checkBoxes.prop("checked")) {
      $('#coreMonthlyText,#coreMonthlyPrice').show('slow');
      $('#coreAnnuallyText,#coreAnnuallyPrice').hide('slow');

    } else {
      $('#coreMonthlyText,#coreMonthlyPrice').hide('slow');
      $('#coreAnnuallyText,#coreAnnuallyPrice').show('slow');
    }
  }
});

.pricing-box {
  background: red;
  padding: 25px
}

.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: .75rem;
  padding-bottom: .75rem;
}

.toggle-switch span {
  border-width: 2px;
  padding-left: .75rem;
  padding-right: .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;
}

<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>


<p id="coreAnnuallyText" class="center_text big-text coreAnnuallyText">this is a annual text blurb</p>
<p id="coreMonthlyText" class="center_text big-text coreMonthlyText">this is a monthly text blurb.</p>