Responsive pricing component with toggle

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted 11 months ago

  Hey, I got a little curious about your issue with the toggle button and I think I've found the problem.

  I saw that initially, you set the properties display:block and display:none to your .card-price and .card-price-monthly classes in a separate css file and when a user clicks the toggle button the priceChange() function is supposed to apply style.display = none to the elements that are displayed as blocks and style.display=block to those with position:none.

  But the thing is that style.display looks for the inline styles of the elements, not in your css file. Thus, when you click the toggle button for the first time, the condition element.style.display === "none" ? "block" : "none" will always return "none" even if in the css file this particular element also has position:none and was supposed to change it to position:block .

  To solve the problem you can either specify these inline styles in your html for each price span, like:

  <span class="card-price-monthly text-white" style="display: none"
              >&dollar;249.99
  </span>
  <span class="card-price text-white" style="display: block"
              >&dollar;24.99
  </span>
  

  Or you can create an init function in your js file, where you set the initial inline styles for the price spans and then call this function.

  function init() {
    monthPriceElements.forEach((element) => {
      element.style.display = "none";
    });
  
    yearPriceElements.forEach((element) => {
      element.style.display = "block";
    });
  }
  
  init();
  

  I hope you've got the idea, but if my explanation doesn't make any sense, feel free to ask additional questions)

  Marked as helpful

  0

  ---

  

  Levis Kim•1,200

  @Orekihotarou-kPosted 10 months ago

  Thank you very much @RoksolanaVeres. I just made the change you suggested and it worked just well. Thank you again 😊✨

  1

  

  Roksolana•910

  @RoksolanaVeresPosted 10 months ago

  You're welcome, I'm happy it helped 🙂

  0