Skip to content
Submitted about 1 year ago

responsive Pricing component with toggle with just html and css

yassine-ramla•520
@yassine-ramla
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

it was pretty challenging to perform the toggle of the prices using just CSS, especially that I'm working with Tailwind-CSS. i will appreciate any feedback.

Community feedback

  • Mustapha SLIMANI•430
    @Slimani-CEPosted about 1 year ago

    I suggest implementing a toggle functionality for prices using a clever combination of HTML and CSS. First, create a hidden checkbox input accompanied by a corresponding label. By placing your toggle button within this label, a click on the toggle will essentially trigger the checkbox. Leveraging the CSS :checked pseudo-class, you can dynamically style elements based on the checkbox's state. When the checkbox is checked, apply styles to display the monthly price; otherwise, keep the yearly price div visible.

    0
    yassine-ramla•520
    @yassine-ramlaPosted about 1 year ago

    @Slimani-CE that's exactly what I've done :). thanks for your help.

    1

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