#0002 CSS Only Toggle Switch

source: https://codepen.io/scottpdawson/pen/RwGbNPV

Try it

Code

the html

<div class="toggleContainer">
  <h3><label for="switch1">Section Title</label></h3>
  <div class="trainingToggle">
    <input type="checkbox" class="switch" id="switch1" />
    <label for="switch1">Toggle</label>
    <table>
      <tr class="workout">
        <td>this content appears when toggle is on</td>
      </tr>
      <tr class="workoutWrap">
        <td>this content always appears</td>
      </tr>
    </table>
  </div>
</div>

the css

.toggleContainer { margin: 2em; }
h3 { font-size: 2em; margin: 10px 0px 10px 55px; }
h3 label:hover { cursor: pointer; }
.trainingToggle { position: relative; }
.trainingToggle input[type="checkbox"] {
  height: 0; width: 0; visibility: hidden; position: absolute;
}
.trainingToggle label {
  cursor: pointer; text-indent: -9999px;
  width: 45px; height: 26px; background: #bdbdbd;
  border-radius: 100px; top: -39px; left: 0;
  position: absolute; display: inline-block;
}
.trainingToggle label:after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; background: #fff;
  border-radius: 90px; transition: 0.3s;
}
.trainingToggle input:checked + label { background: #5277a4; }
.trainingToggle input:checked + label:after {
  left: calc(100% - 2px); transform: translateX(-100%);
}
.trainingToggle label:active:after { width: 22px; }
.switch ~ table tr.workout { display: none; }
.switch:not(:checked) ~ table tr.workoutWrap { border: 0; background: none; }
.switch:not(:checked) ~ table tr.workoutWrap td { padding: 0; }
.switch:checked ~ table tr.workout { display: inherit; }