A HTML-CSS only solution would be inaccessible and should not be included as a bonus. I will speak to FM about that!!
1
Submitted
Pricing Component with Toggle | Progressive Enhancement
#accessibility#lighthouse#progressive-enhancement#sass/scss#bem
Vanza Setia• 27,835
@vanzasetia
Design comparison
Solution retrospective
Hello everyone! 👋
I finally completed another challenge. This is my first solution in 2023. 🎉
Surprisingly, I learned a lot while building this project. I mainly learned about progressive enhancement. In this case, the content of the site can be understood with HTML only. CSS and JavaScript are only for enhancing the site.
I have a question. How to make an accessible toggle button with HTML and CSS only? It is part of the bonus challenge. Right now, I use the checkbox input to create the toggle button.
Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.
If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you!
Happy coding!
Community feedback
cmb347827• 660
@cmb347827
Posted
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• 660
@cmb347827
Posted
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,835
@vanzasetia
Posted
@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
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord