Creating Tabs With CSS

Creating tabs is usually more popular using jquery, but actually it’s enough with css that we can create tabs that are no less good.


In this article, we will briefly explain how to create tabs using only css, without the help of jquery or other javascript.

HTML Structure
First, let’s create the HTML structure
It can be seen in the script above, to create the title of the tab we use input tags and labels, in this example we create 4 tabs, where each tab is given the ID tab1, tab2, tab3, tab4

Meanwhile, the content of each tab is created with section tags, each of which has the ID content1, content2, content3, content4.

Styling with CSS
After we create the html structure of the tab, of course it will not be in the form of a tab, it needs to be designed or styled using css, this is the css code that we use

The most important thing to note in the code above is the code that we marked with /* Important Code */ until the end.

Where is the code that changes the input tag to a tab, why use radio type input? because tabs usually only have one active section while the others will be closed, for that only radio type inputs are allowed to be selected like that.

So the logic is as simple as this: the section tag when loading will be hidden, when one of the tab IDs is active (one of the radio inputs is selected), the contents of that ID will be displayed, using the display:block command.

Demos and codes

You can see the demo and also download the source code at the link below