Skip to content
Submitted over 5 years ago

Pricing with toggle

Kong•155
@kmongy
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    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! 👍

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