gulp->CSS + JS

Community feedback

• 

  Mahesh Yadav•1,220

  @Mahesh-yadavPosted over 4 years ago

  You can use hidden checkbox to toggle prices. Follow following code:

  <label class="switch" for="price-switch">          // add **for attribute** to link it with checkbox
     <input type="checkbox" id="price-switch">    // Remove this checkbox
     <span class="slider round"></span>
  </label>
  

  Place the checkbox as a sibling of <div class="cards-section">.

  <input type="checkbox" id="price-switch">
  <div class="cards-section">
  

  Then add following styles:

  <section class="card">
          <h3 class="card-title">Basic</h3>
          <div class="card-price"> <span class="price-monthly">19.99</span></div>
          <div class="card-price"> <span class="price-annually">199.99</span></div>
         
          // similarly for other cards
          <h3 class="card-title">Professional</h3>
          <div class="card-price"><span class="price-monthly">49.99</span></div>
          <div class="card-price"><span class="price-annually">49.99</span></div>
  
          // All monthly prices have same css class `price-monthly` and all annual plans have same css class
  

  Hide one of the price category initially:

  .price-monthly{
      display: none;
  }
  

  when checkbox is checked toggle display property:

  #price-switch:checked ~ .cards-section .price-monthly{
      display: block;
  }
  
  #price-switch:checked ~ .cards-section .price-annually{
      display: none;
  }
  

  2