Simple nested tabs with ONLY, HTML & CSS

How can I make simple nested tabs with ONLY, HTML & CSS?

The request The Principle How to...

Main purpose A few more Note

Request: Main purpose

☺ I would like to see an example of a simple combination of HTML & CSS that explains/shows or is easily readable that results in nested tabs on a single page.

Request: A few more

I'm also curious if this can be done w/ a collapsible sidebar/sitemap.

Request: Note

😵 I've done a lot of searching on the subject and there is a few I found that work. But most of the examples I've found use old depreciated JQuery & JS.

Root Unique item Multi items

Principle: Root

The idea is to use <label> element ability to command <input> radio (or checkbox, but here we want to select only one item at a time) with the 'for' attribute targetting a specific 'id'... for use by hidding the <input> and benefit of his css peudo class ':checked' to target sibling after element container (in case of nested tab, first content is another same structure)

Principle: Unique item Html/Css

The problem to solve is in Css targetting rule, where we need to display each radio label together, before each tab content (which we want display each at a time, depending of wich radio is checked)... so each content isn't child of, but sibling with other siblings elements between.

The single item Html structure will be:

<input type="radio" id="commandTab">
<label for="commandTab">Tab text</label>
<div>Tab content</div>

... and Css to handle it:

input[type=radio],
input[type=radio]+label+div {
    display:none;
}
input[type=radio]:checked+label+div {
    display:block;
}

... where we use pseudo selectors '[type=radio]' to target more specifically radio <input> (could be avoided in most of cases), and almost ':checked' one, wich allow targetting element with attribut 'checked' set, in combination with direct sibling css selector operator '+'

Principle: Multi items Html/Css

Well, for multi item, we have to group pairs of radio and label elements at first, then each corresponding content divisions:

<input type="radio" id="cmdTab0" name="commandTabs">
<label for="cmdTab0">Tab text</label>
<input type="radio" id="cmdTab1" name="commandTabs">
<label for="cmdTab1">Tab text</label>
<input type="radio" id="cmdTab2" name="commandTabs">
<label for="cmdTab2">Tab text</label>
<div class="tabContent">Tab content 0</div>
<div>Tab content 1</div>
<div>Tab content 2</div>

Note that we need a unique name shared by each radio to be able to have only once checked at a time...

Css selectors are the little difficulty, as they require to be specific, depending of number of tabs used (each radio have different number and type of direct sibling element before targeted content division:

input[type=radio],
.tabContent {
    display:none;
}
input[type=radio]:checked+label+input+label+input+label+div,
input[type=radio]:checked+label+input+label+div+div,
input[type=radio]:checked+label+div+div+div {
    display:block;
}

Note that we use a specific class name for tabs content division, to simplify targetting them to default retrieve them from display (hide)... and shorten selector by retrieving the '[type=radio]' specifier from the jumped direct sibling ones :P

Nested tabs Handle many tab counts

How to: Nested tabs

Just fill one tab content with the another same structure, adding specific class and/or id to visually style differently outter and inner tabs... Obviously, using unique ids, and unique name for each tabs group ^^

Check source code of this tutorial for see how to implement some ;)

How to: Handle different counts of tabs

For same number of tabs in each groups (nested or not), we can use same classes definitions/selectors... However, we need to add more specificity to handle differents.

We can write this specifics css rules at each cases/pages, or define a few more generic ones, with container classes names like 'wrap2tabs', 'wrap3tabs', 'wrap4tabs', and so on: check the css end source code and comments of this tutorial for viewing this kind of declaration (just used in this inner tab group of the present running html, for avoiding too heavy and confusing code ;P)

Simple nested tabs with ONLY, HTML + CSS