Pricing Component with Toggle | Progressive Enhancement

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  A HTML-CSS only solution would be inaccessible and should not be included as a bonus. I will speak to FM about that!!

  1
• 

  cmb347827•750

  @cmb347827Posted over 1 year ago

  Yes, I created the toggle functionality with my code with just CSS. I also have a JS solution , but that's disabled.

  I used the :has pseudoselector:

  body:has(#annual:checked) .year{ display:block; } body:has(#annual:checked) .month{ display:none; } body:has(#monthly:checked) .year{ display:none; } body:has(#monthly:checked) .month{ display:block; }

  The year and month classes are <span> elements within the html body. They are positioned next to each other within each <li> element.

  0
• 

  cmb347827•750

  @cmb347827Posted over 1 year ago

  Hi, about your question 'How to make an accessible toggle button with HTML and CSS only?'

  I also started out with a checkbox, until someone (at freecodecamp) pointed out that is not the correct way to code a toggle that in reality isn't an on/off (one option) toggle, but two options toggle(annual/monthly). He said to use two radio buttons.

  See the link below for an idea in the right direction: https://www.sarasoueidan.com/blog/toggle-switch-design/#if-the-switch-toggle-is-supposed-to-explicitly-offer-and-enable-two-separate-options%3A-public-and-private

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @cmb347827

  About my question, I mean I want to create an accessible toggle button with HTML and CSS, including the toggle functionality. I tried using radio buttons but, it did not work since the styling was not possible.

  With the checkbox, I can use the general sibling combinator (~) to toggle the prices.

  Do you know how to create the toggle functionality with just CSS?

  0