Advertisement
  1. Web Design
  2. CSS Selectors

How to Build a Pricing Table With a Monthly/Yearly CSS Toggle Switch

Scroll to top
Read Time: 4 min

Toggle button switches are a classic UX trend often met in different parts of a website or an app. In a previous tutorial, we discussed how to build a CSS-only switch component for a simple to-do checklist. Today, we’ll create another switch: a monthly/yearly switch that will let visitors go through different pricing plans. 

Our Switch Component

Here’s our component demo:

Showcase of Pricing Toggle Switches

Before we start building our switch, let’s first get inspiration from a few pricing pages that use toggle switches.

1. Begin With the HTML Markup

We’ll define a container that will include two nested wrappers: the switch wrapper and the table wrapper.

Inside the switch wrapper, we’ll place two radio buttons followed by their associated labels and an empty span element with the class of highlighter. By default, the first radio button will be checked.

It’s worth mentioning that there are different approaches we can follow to build the component. An alternative implementation might be to get rid of the empty span and use pseudo-elements.

Inside the table wrapper, we’ll place the table. 

Here’s the starting markup:

Most of the table contents and styling will come from a previous tutorial where we built a pricing table with a sticky header. From this tutorial, I’ve cleared out all the unnecessary styles. I’ve also made a few style adjustments to match the target of this demonstration. Anyhow, the table styles are of secondary importance.

Sticky pricing tableSticky pricing tableSticky pricing table
Sticky pricing table

For this exercise, we’ll only update the table headings, so the .info element will include two different amounts depending on the plan. By default, only the monthly amount will be visible.

Here’s what the markup of a table heading will look like:

2. Define the Switch Styles

Similar to our previous switch component, we’ll also take advantage of the “CSS checkbox hack technique” to toggle the switch.

The switch stylesThe switch stylesThe switch styles

There are already lots of implementations of this method in the Tuts+ library, so I won’t go into more detail. I would recommend going through all these examples to become familiar with how to simulate JavaScript’s click event on CSS elements though.

Here are (briefly) the steps we’ll follow:

  • Visually hide the radio buttons.

  • Position absolutely the .highligher element inside the container.
  • Each time we click on the switch, the .highlighter’s position will change thanks to the transform CSS property. At that point, the color of the active label will also change from black to white.

Here are all the styles attached to our component:

3. Toggle Table Info With JavaScript

Up to this point, we’ve successfully created the switch. But, there’s one extra thing that we have to do; show the relevant table prices depending on the active selection.

To do this, we’ll use a bit of JavaScript. Specifically, each time a user toggles the switch, we’ll do the following things:

  • Grab the ID of the selected radio button.
  • Hide all the table elements with the class of .price.
  • Show only the .price elements whose class matches this ID.

Here’s the required JavaScript code:

And the associated CSS class:

Conclusion

Thanks for following across another tutorial, folks! I hope this exercise has given you enough knowledge to build a CSS-only toggle switch for filtering parts of your website or app. Here we covered how to use such a switch as a part of a pricing page—another use case might be to have it switch layout views (grid and list views).

Of course, if you need to create switches with complex functionality, JavaScript will probably be a better approach.

Here’s a reminder of what we built:

As always, thanks a lot for reading!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.