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

Question

☺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. Without using JS or Jquery.

Bonus: I'm also curious if this can be done with a collapsible accordion style sidebar/sitemap.

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.

Answer 1

( @Emore Anzolin: Question was about only Css, as there could be some (good) reasons to avoid JS ^^ )

Well, it was not sane for my next work day because of lack of sleep, but I use up some hours tonight to code the pure Css nested tab tutorial-example, with I guess enough description/comments (as well inside source code as at page content -- the biggest part of this task ;P) to be relatively easily understandable:

https://code.sololearn.com/WHJcalsIWiiZ/#html

Answer 2

@visp @everyone

After more research into the bonus question in the discription of this post "I'm also curious if this can be done with a collapsible sidebar/sitemap." I finally found a good example of what I was looking for! (from 2015)

https://codyhouse.co/demo/multi-level-accordion-menu/index.html#0

It has a example with html & css ONLY. And it has a example with the same thing in Jquery (the JQ ex. is most likely out dated & not working)

Answer 3

@visph Sorry about not being clear in the description. I ment how can I make nested tabs without the use of JS or Jquery.

Answer 4

Not nested, but tabs without JS already done:

https://code.sololearn.com/WxWFo7C8KNNV/#html

... however, I can probably make some nested, but not before sunday ( I have heavy work days IRL actually ), and it will be not very obvious, but I can try to explain with my poor english if you cannot: tell me what you need to understand my previous code, if you cannot adapt it by yourself to make nested one ;)

Anyway, what are you meaning by writing << if this can be done w/ a collapsible sidebar/sitemap >> ?
I guess "w/" is for "without", but can you describe more "collapsible sidebar/sitemap"?

Answer 5

Or have a look at Igor's blog with bootstrap tabs!

https://code.sololearn.com/W2aXF9GvCrGi/?ref=app

Answer 6

@kryptic:

Well so, I better understand your 'bonus' question ;)
However, they use same solution principle as I describe in mine (whith <input> element hidden and 'checked' attribute), but probably it's better explained in the link you finally found :P

Do you need more help to adapt and style them ( mine and old 2015 one ) as you want?
The only constraint is to have the radio <input> before and on a parent level from the elemets to 'command' (hide/show by css) in the DOM to be able to target them with css selectors ;) Zlse itt remaind mostly to style your stuff to display as you want ( tabs, collapsible menu, and so on... )

Anyway, I've done little update to my previous code-tutorial ( correction of 2 forgotten safer '>' selector operator, and adding rule to display hand cursor on unchecked label )

https://code.sololearn.com/WHJcalsIWiiZ/#css

Answer 7

It is esear to use JavaScript for interactive menu then CSS.

<button id = "Bmenu">menu</button>
<button id = "Bsubmenu">sub menu</button>

<script>
var Bmenu = document.querySelector("#Bmenu");
var Bsubmenu = document.querySelector("#Bsubmenu");

Bmenu.onclick = function(){
if(Bmenu.style.color == "red"){
Bmenu.style.color = "white";
Bsubmenu.style.display = "none";
}
else{
Bmenu.style.color = "red";
Bsubmenu.style.display = "inline";
}
}//end Bmenu.onclick
</script>

Answer 8

The post limit the amount of text I can write, so it's hard to explain again all the process, and even impossible to give you the minimal structure...

Compare the different .wrap{n}tabs class selectors, try to figure how they work, be more specific to explain where you stuck and give your code.

... and due to post limitations, it's preferable to discuss of your specific case in the comment section of my code (where order of replies will be preserved, and then allowing to post answer in multipart ^^), or of yours, if you share the link...

Answer 9

5 tabs HTML min structure:

<div class="tabContent wrap5tabs">
<input class="commandTab" type="radio" id="inCmdTab00" name="inCmdTabs0" checked>
<label for="inCmdTab00">1st tab</label>
... and so on, until 5 with differents id, same name ...
<div class="tabContent">
... 1st content ...
</div>
... and so on, until 5 ...

.wrap5tabs class selectors structure:

.wrap5tabs>input[type=radio]:checked+label{+input+label}(*4)+.tabContent,
.wrap5tabs>input[type=radio]:checked+label{+input+label}(*3){+.tabContent}(*2),
.wrap5tabs>input[type=radio]:checked+label{+input+label}(*2){+.tabContent}(*3),
.wrap5tabs>input[type=radio]:checked+label+input+label{+.tabContent}(*4),
.wrap5tabs>input[type=radio]:checked+label{+.tabContent}(*5)

Answer 10

我来打个酱油

Answer 11

Hi visph

I try to alter your code. i need more than 3 tabs on 2nd tier, and have no luck.

==> (the request tab) - (main purpose) (A few more) (note) (...) (...)

Thanks