I want to add a switch that switches between Monthly prices and Yearly prices

Question

I hope your doing great. I want to add a switch that switches between "Monthly" and "Yearly". When Switched to yearly, I want the price shown to change from 9$ to 6$. I basically want a toggle switch to change text.

  <!-- Pricing --> 
    <div class="v-line v-line-left"> <div class="container">       
     <div class="pricing-items row">
              <div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
                  <div class="lui-subtitle">
                    <span> Essentials </span>
                  </div>
                  <div class="icon"></div>
                  <div class="price">

                   <span>9</span><span>$</span>

                   <em>PM</em>
                  </div>

  <br><br>
    <label>
      <input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
      <span class="switch"></span>
    </label>
                  <div class="lui-text">
                    <div>
                      <p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
                    </div>
                  </div>
                  <div class="list">
                    <div>
                      <ul>
                        <li>
                          <i class="fas fa-check"></i>Summaries
                        </li>
                        <li>
                          <i class="fas fa-check"></i>Chromebook Tips/Tricks
                        </li>
                        <li>
                          <em>H.W Answers & Explanations</em>
                        </li>
                        <li>
                          <em>Weekly Revision Meetings</em>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
                    <span>Join Now!</span>
                  </a>
                  <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
                </div>
              </div>
              <div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <div class="label">
                  <span> Popular </span>
                </div>
                <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
                  <div class="lui-subtitle">
                    <span> Power User </span>
                  </div>
                  <div class="icon"></div>
                  <div class="price">
                      <em><s>$12</s></em> <span> 8 <b>$</b>
                    </span>
                    <em>PM</em>
                  </div>
                  <div class="lui-text">
                    <div>
                      <p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
                    </div>
                  </div>
                  <div class="list">
                    <div>
                      <ul>
                        <li>
                          <i class="fas fa-check"></i>Summaries
                        </li>
                        <li>
                          <i class="fas fa-check"></i>Chromebook Tips/Tricks
                        </li>
                        <li>
                          <i class="fas fa-check"></i>H.W Answers & Explanations
                        </li>
                        <li>
                          <em>Weekly Revision Meetings</em>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
                    <span>Join Now!</span>
                  </a>
                  <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
                </div>
              </div>
              <div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
                  <div class="lui-subtitle">
                    <span> Ultimate </span>
                  </div>
                  <div class="icon"></div>
                  <div class="price">
                     <em><s>$17</s></em><span> 12 <b>$</b>
                    </span>
                    <em>PM</em>
                  </div>
                  <div class="lui-text">
                    <div>
                      <p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
                    </div>
                  </div>
                  <div class="list">
                    <div>
                      <ul>
                        <li>
                          <i class="fas fa-check"></i>Summaries
                        </li>
                        <li>
                          <i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks

                        </li>
                        <li>
                          <i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations

                        </li>
                        <li>
                          <i class="fas fa-check"></i>Weekly Revision Meetings
                        </li>
                      </ul>
                    </div>
                  </div>
                  <a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
                    <span>Join Now!</span>
                  </a>
                  <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
                </div>
              </div>
            </div>

            <div class="lui-bgtitle">
              <span> Pricing </span>
            </div>

                    </div>
                    
                </div>
 <div class="container">
          <div class="lui-heading">
          <div class="container">

            <div class="m-titles align-center">
              <h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
                  <br>
                  <br>
                  <br>
                <span> What are you waiting for? Join now and guarantee your A+ this year! </span>
              </h2>
              
                
                
              </div>
            </div>
      </section>

Thank you.

I have tried searching for a solution for hours but got no luck. I even tried chat gpt...

Answer 1

[UPDATED]

If i understand you right you just want to change the price by flipping a switch.

I created one and a basic JS function for it.

Greetings

[UPDATE]

Changed so it appends on all the prices and automatically divides 20% of the price down. Also changed the default "PM" to either PY or PM.

You can edit the switch I inserted as you want. The only thing important is the function toggleyearmonth();

function toggleyearmonth() {
  document.querySelectorAll(".price span").forEach(pricenum => {
    if(pricenum.getAttribute("pm")){
      if(pricenum.getAttribute("pm") == pricenum.innerText){
        pricenum.innerText = (pricenum.getAttribute("pm") - pricenum.getAttribute("pm")/100*20).toFixed(0);
        pricenum.parentNode.childNodes[4].innerText = "PY";
      } else {
        pricenum.innerText = pricenum.getAttribute("pm");
        pricenum.parentNode.childNodes[4].innerText = "PM";
      }
    }
  })
};

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]+.switch {
  display: inline-block;
  position: absolute;
  width: 60px;
  height: 34px;
  margin: 0;
  padding: 0;
  background: #ddd;
  border-radius: 20px;
  position: relative;
  vertical-align: middle;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

input[type="checkbox"]+.switch:before {
  content: "";
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 20px;
  position: absolute;
  top: -8px;
  left: -5px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input[type="checkbox"]:checked+.switch {
  background: #4caf50;
}

input[type="checkbox"]:checked+.switch:before {
  left: calc(100% - 30px);
}

<label>
      <input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
      <span class="switch"></span>
</label>
<br><br>

<!-- Pricing -->
<div class="v-line v-line-left">
  <div class="container">
    <div class="pricing-items row">
      <div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
          <div class="lui-subtitle">
            <span> Essentials </span>
          </div>
          <div class="icon"></div>
          <div class="price">
            <span pm=9>9</span><span>$</span>
            <em>PM</em>
          </div>
          <br><br>
          <div class="lui-text">
            <div>
              <p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
            </div>
          </div>
          <div class="list">
            <div>
              <ul>
                <li>
                  <i class="fas fa-check"></i>Summaries
                </li>
                <li>
                  <i class="fas fa-check"></i>Chromebook Tips/Tricks
                </li>
                <li>
                  <em>H.W Answers & Explanations</em>
                </li>
                <li>
                  <em>Weekly Revision Meetings</em>
                </li>
              </ul>
            </div>
          </div>
          <a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
            <span>Join Now!</span>
          </a>
          <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
        </div>
      </div>
      <div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="label">
          <span> Popular </span>
        </div>
        <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
          <div class="lui-subtitle">
            <span> Power User </span>
          </div>
          <div class="icon"></div>
          <div class="price">
            <span pm=12>12</span><span>$</span>
            <em>PM</em>
          </div>
          <div class="lui-text">
            <div>
              <p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
            </div>
          </div>
          <div class="list">
            <div>
              <ul>
                <li>
                  <i class="fas fa-check"></i>Summaries
                </li>
                <li>
                  <i class="fas fa-check"></i>Chromebook Tips/Tricks
                </li>
                <li>
                  <i class="fas fa-check"></i>H.W Answers & Explanations
                </li>
                <li>
                  <em>Weekly Revision Meetings</em>
                </li>
              </ul>
            </div>
          </div>
          <a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
            <span>Join Now!</span>
          </a>
          <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
        </div>
      </div>
      <div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
          <div class="lui-subtitle">
            <span> Ultimate </span>
          </div>
          <div class="icon"></div>
          <div class="price">
            <span pm=17>17</span><span>$</span>
            <em>PM</em>
          </div>
          <div class="lui-text">
            <div>
              <p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
            </div>
          </div>
          <div class="list">
            <div>
              <ul>
                <li>
                  <i class="fas fa-check"></i>Summaries
                </li>
                <li>
                  <i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks

                </li>
                <li>
                  <i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations

                </li>
                <li>
                  <i class="fas fa-check"></i>Weekly Revision Meetings
                </li>
              </ul>
            </div>
          </div>
          <a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
            <span>Join Now!</span>
          </a>
          <div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
        </div>
      </div>
    </div>
    <div class="lui-bgtitle">
      <span> Pricing </span>
    </div>
  </div>
</div>
<div class="container">
  <div class="lui-heading">
    <div class="container">
      <div class="m-titles align-center">
        <h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
          <br>
          <br>
          <br>
          <span> What are you waiting for? Join now and guarantee your A+ this year! </span>
        </h2>
      </div>
    </div>
    </section>