6.7. Toggle in Complex Pricing Table

<html>

<head>
  <style>
    .switch-complex {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch-complex input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider-complex {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider-complex:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .2s;
      transition: .2s;
    }

    input:checked+.slider-complex {
      background-color: #3cd278;
    }

    input:focus+.slider-complex {
      box-shadow: 0 0 1px #3cd278;
    }

    input:checked+.slider-complex:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    .slider-complex.round-complex {
      border-radius: 34px;
    }

    .slider-complex.round-complex:before {
      border-radius: 50%;
    }
  </style>

  <script>

    window.addEventListener("load", loadingcomplex, true);

    function loadingcomplex() {
      var pricebmonthly = document.getElementById("pricebmonthly");
      var pricebyearly = document.getElementById("pricebyearly");
      var pricepmonthly = document.getElementById("pricepmonthly");
      var pricepyearly = document.getElementById("pricepyearly");

      var buttonbyearly = document.getElementById("buttonbyearly");
      var buttonbmonthly = document.getElementById("buttonbmonthly");
      var buttonpyearly = document.getElementById("buttonpyearly");
      var buttonpmonthly = document.getElementById("buttonpmonthly");

      pricebyearly.style.display = "block";
      pricebmonthly.style.display = "none";

      pricepyearly.style.display = "block";
      pricepmonthly.style.display = "none";

      buttonbyearly.style.display = "block";
      buttonbmonthly.style.display = "none";

      buttonpyearly.style.display = "block";
      buttonpmonthly.style.display = "none";

    }

    function showhidecomplex() {
      var togglecomplex = document.getElementById("togglecomplex");

      if (togglecomplex.checked == true) {
        pricebyearly.style.display = "block";
        pricebmonthly.style.display = "none";

        pricepyearly.style.display = "block";
        pricepmonthly.style.display = "none";

        buttonbyearly.style.display = "block";
        buttonbmonthly.style.display = "none";

        buttonpyearly.style.display = "block";
        buttonpmonthly.style.display = "none";

      }

      else {
        pricebyearly.style.display = "none";
        pricebmonthly.style.display = "block";

        pricepyearly.style.display = "none";
        pricepmonthly.style.display = "block";

        buttonbyearly.style.display = "none";
        buttonbmonthly.style.display = "block";

        buttonpyearly.style.display = "none";
        buttonpmonthly.style.display = "block";
      }

    }
  </script>

</head>

<body>


  <label class="switch-complex">
    <input type="checkbox" id="togglecomplex" onclick="showhidecomplex()" checked>
    <span class="slider-complex round-complex"></span>
  </label>

</body>




</html>