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

html, css

@josiasT1000

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

Community feedback

@fadzrinmadu

Posted

very good job. one question what if I add a wrapper element to the input how do I keep the toggle going? do you have any idea?

0

@josiasT1000

Posted

@fadzrinmadu

if you are talking about this input <input id="myCheckbox" type="checkbox" >, I don't know. Because if you add a wrapper to that input("#myCheckbox"), that mean #myCheckbox is no longer sibling with <div class="plans-content">, but his wrapper("parent") is.

So now before selecting prices part depending of if #myCheckbox is checked or not you need to css selector ="#myCheckbox:state ?? wrapper ~ .plans-content .priceX::before": 1-select #myCheckbox with his state("checked or notChecked"), 2-then select his parent who is sibling with <div class="plans-content"> by parent selector "??" 3-select <div class="plans-content"> by sibling selector "~" 4-and select price by child selector " "

But the issue is the are no parent selector. that why I didn't wrap input #myCheckbox.

I hope I help you. Thanks for your feedback.

0

@fadzrinmadu

Posted

@josiasT1000 thank you for your answer. this is very helpful

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