Most pricing tables are made of 3 columns so in this example, I have only included 3 columns. You can add more or less by adjusting HTML content by keeping the same class name.
Before you start here are some good reads to go through to understand the code completely. I have broken down the complete code in small sections in these 6 previous posts.
- How to create a flip effect with CSS?
- CSS backface-visibility Property
- How to convert an HTML radio buttons into a toggle switch using CSS?
- first-of-type and last-of-type selectors in CSS
- clip and clip-path properties in CSS
- How to make flexbox items of the same size?
Now, let’s add the style for the table columns and flip.
Let’s add the toggle switch to give the users options of switching the table pricing – Monthly vs Yearly.
We can use querySelectorAll to get all the columns with the class name “column”.
The code after that will be added to the function flip() we talked about earlier. The function will get fired onclick and the table flip will occur.
Based on those values, we’ll add a class and remove a class which will create the flip effect.
Here’s the working demo: