Functional tabs with only CSS (No JavaScript)
This article demonstrates how to create functional tabs using only CSS, without any JavaScript. The tabs will allow users to switch between different content sections seamlessly, showcasing the power of CSS for interactive elements.
Basic setup:
To get started, we will create a typical HTML structure for our tabs and apply some basic styles to make them visually appealing.
Great! Now we need somekind of interactivity.
Lets think what cab we do so the active tab has something different than other tabs.
Well we can use <input type="radio" /> to indicate the active tab. Since radio inputs allow only one to be selected at a time, we can use them to control which tab is active.
And to make sure we can toggle the radio inputs by clicking on the tab, we can use the <label> element instead of <div> for the tab items.So the updated HTML structure will look like this:
Nice progress!
Since we don't want the radio inputs to be visible, we can hide them using .tab-item input{display: none; } in the CSS.
Highlight the active tab:
We can use the tab-item:has(input:checked) selector in CSS to check if a tab has a checked input and apply styles to it.
Amazing! Now we can see which tab is active.
Using the same logic, we can also show/hide the content of the active tab.