You don't need... JavaScript to do tabs

Intro

The current development ecosystems we code in make it so easy to make a highly interactive experience with client-side code. Sometimes we reach for JavaScript (or worse yet, a whole framework) when we should hold off on that for as long as possible.

This is the first of (hopefully) many entries in a series I like to call You don't need...

What do we need for tab navigation?

To do tabs we need to do 2 things:

1. Track the current tab index
2. Show and hide tab content based on the index

And CSS can do both!

The principals

CSS has a class of selectors called a sibling selector (+ for immediately after and ~ for somewhere after) which will select a sibling element (one that is on the same "level" and shares their containing element).

CSS also has nth pseudo selectors, specifically the :nth-of-type(i) selector which will select the ith element of whatever selector you put before it.

The CSS principal you need to understand is the :checked pseudo selector which applies to input elements that have been checked (like a radio button or check box

Getting it done

Track the current tab index

In JavaScript we would update the tab index whenever we clicked on the tab. CSS has a way of tracking input element state with :checked as mentioned above so we can detect this in CSS with input.tab:checked:nth-of-type(i) where i is the index of the tab selected. We can make a new rule for every tab but it's kind of useless without some action based on the index

Show and hide tab content based on selected index

For starters, the default state of a tab is hidden so I think display: none on our tab content is obvious. And showing it is as simple as display: block. The trick is showing the ith content when the ith tab is selected. For that we use the ~ (general sibling) selector. As long as your tabs are of one type (probably a label element for each of your hidden input state-managing elements) and your content is another type (a div maybe?) then you can group them as different "types" and use a rule like input.tab:checked:nth-of-type(1)~div.tab-content:nth-of-type(1) to select the first tab content element whenever the first tab is selected

A working example

JSFiddle link

You can also change the input type to checkbox for toggles JSFiddle link

How long does it take for you to resort to JavaScript to perform interactivity on an otherwise static site?

I am curious what other people think of avoiding JavaScript. I personally prefer to avoid it if the site is going to be mostly static since it means all my noscript users still have a good experience. At the very least, I want them to be able to sucessfuly use the site in a limited form, even if the optional frills I throw in do not function