Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pricing with toggle

Kong 155

@kmongy

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Are there ways to change the text without Javascript? Hacks I suppose? But would that be efficient?

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge, Kong! You can definitely achieve this functionality without using JS in a "non-hacky" way. To do this, you'd need to re-structure your HTML so that the input is a sibling of the .pricing-table-container element. From there you can use the general sibling selector (~) combined with the :checked pseudo-selector to update the content. It would look something like this: input:checked ~ .pricing-table-container .basic-price { display: block }.

Let me know if you have any questions. Keep up the great work! 👍

1

Kong 155

@kmongy

Posted

@mattstuddert Ah that's it! I forget about the pseudo-selectors all the time. Thanks for the reminder and advice!

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@kmongy no problem at all! 🙂

0

Please log in to post a comment

Log in with GitHub
Discord logo

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