I found a code that I like but I want to be able to add more nested tabs and nested tabs inside other nested tabs but I don’t know how here’s the page where i found the code Nested CSS Tabs Not Working Fully! - #2 by coderboy
The nested tabs are working in that page ok. If you want more nestings you would need to continue and extend the logic already started with the existing nested tab.
here’s an example of nesting a third tab in the top level again.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.tabGroup {
font: 10pt arial, verdana;
width: 100%;
}
.tabGroup > input[type="radio"] {
position: absolute;
left:-100px;
}
.tabGroup > div.tablabels {
display: inline-block;
vertical-align: top;
width:33%;
margin-right:-5px;
}
.tabGroup > div.tablabels > label {
display: inline-block;
width:100%;
border: 1px solid black;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px ;
-webkit-border-radius: 5px 0 0 5px ;
padding: 5px 10px;
background-color:#ddd;
z-index:32767;
}
.tabGroup > input#rad1:checked ~ div.tablabels > label[for="rad1"],
.tabGroup > input#rad2:checked ~ div.tablabels > label[for="rad2"],
.tabGroup > input#rad3:checked ~ div.tablabels > label[for="rad3"],
.tabGroup > input#rad4:checked ~ div.tablabels > label[for="rad4"],
.tabGroup > input#rad5:checked ~ div.tablabels > label[for="rad5"],
.tabGroup > input#rad6:checked ~ div.tablabels > label[for="rad6"],
.tabGroup > input#rad7:checked ~ div.tablabels > label[for="rad7"] {
background-color:white;
font-weight: bold;
border-right: none;;
position:relative;
}
.tabGroup > div.tabcontent {
display: inline-block;
width: 66%;
}
.tabGroup > div.tabcontent > div {
width:100%;
display: none;
border: 1px solid black;
background-color: white;
padding: 10px 10px;
height: 100%;
overflow: auto;
box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
-webkit-box-shadow: 0 0 20px #444;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}
.tabGroup > .tab1:checked ~ div.tabcontent > .tab1,
.tabGroup > .tab2:checked ~ div.tabcontent > .tab2,
.tabGroup > .tab3:checked ~ div.tabcontent > .tab3,
.tabGroup > .tab4:checked ~ div.tabcontent > .tab4,
.tabGroup > .tab5:checked ~ div.tabcontent > .tab5,
.tabGroup > .tab6:checked ~ div.tabcontent > .tab6,
.tabGroup > .tab7:checked ~ div.tabcontent > .tab7 {
display: inline-block;
min-height: 400px;
}
/***** TabGroup2 & 3 *******/
.tabGroup2,.tabGroup3 {
font: 10pt arial, verdana;
}
.tabGroup2 > input[type="radio"],
.tabGroup3 > input[type="radio"] {
position: absolute;
left:-100px;
}
.tabGroup2 > div.tablabels2,
.tabGroup3 > div.tablabels3 {
display: inline-block;
vertical-align: top;
width:33%;
margin-right:-5px;
}
.tabGroup2 > div.tablabels2 > label,
.tabGroup3 > div.tablabels3 > label {
display:block;
border: 1px solid black;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px ;
-webkit-border-radius: 5px 0 0 5px ;
padding: 5px 10px;
background-color:#ddd;
z-index:32767;
}
.tabGroup2 > input#rad21:checked ~ div.tablabels2 > label[for="rad21"],
.tabGroup2 > input#rad22:checked ~ div.tablabels2 > label[for="rad22"],
.tabGroup2 > input#rad23:checked ~ div.tablabels2 > label[for="rad23"],
.tabGroup3 > input#rad31:checked ~ div.tablabels3 > label[for="rad31"],
.tabGroup3 > input#rad32:checked ~ div.tablabels3 > label[for="rad32"],
.tabGroup3 > input#rad33:checked ~ div.tablabels3 > label[for="rad33"] {
background-color:white;
font-weight: bold;
border-right: none;;
position:relative;
}
.tabGroup2 > div.tabcontent2,
.tabGroup3 > div.tabcontent3{
display: inline-block;
width: 66%;
}
.tabGroup2 > div.tabcontent2 > div,
.tabGroup3 > div.tabcontent3 > div {
width:100%;
display: none;
border: 1px solid black;
background-color: white;
padding: 10px 10px;
height: 100%;
overflow: auto;
box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
-webkit-box-shadow: 0 0 20px #444;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}
.tabGroup2 > .last24:checked ~ div.tabcontent2 > .last24,
.tabGroup2 > .last7:checked ~ div.tabcontent2 > .last7,
.tabGroup2 > .last30:checked ~ div.tabcontent2 > .last30,
.tabGroup3 > .last24:checked ~ div.tabcontent3 > .last24,
.tabGroup3 > .last7:checked ~ div.tabcontent3 > .last7,
.tabGroup3 > .last30:checked ~ div.tabcontent3 > .last30 {
display: inline-block;
min-height: 400px;
}
</style>
</head>
<body>
<div class="tabGroup">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
<input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
<input type="radio" name="tabGroup1" id="rad4" class="tab4"/>
<input type="radio" name="tabGroup1" id="rad5" class="tab5"/>
<input type="radio" name="tabGroup1" id="rad6" class="tab6"/>
<input type="radio" name="tabGroup1" id="rad7" class="tab7"/>
<div class="tablabels">
<label for="rad1">Most Popular Females</label>
<label for="rad2">Most Talkative Females</label>
<label for="rad3">Most Private Chatting Females</label>
<label for="rad4">Elite Chat Females</label>
<label for="rad5">Sweetest Females</label>
<label for="rad6">Dirtiest Females</label>
<label for="rad7">Most Emotes Used</label>
</div>
<div class="tabcontent">
<div class="tab1">
<div class="tabGroup2">
<input type="radio" name="tabGroup2" id="rad21" class="last24" checked="checked"/>
<input type="radio" name="tabGroup2" id="rad22" class="last7"/>
<input type="radio" name="tabGroup2" id="rad23" class="last30"/>
<div class="tablabels2">
<label for="rad21">Last 24 Hours</label>
<label for="rad22">Last 7 Days</label>
<label for="rad23">Last 30 Days</label>
</div>
<div class="tabcontent2">
<div class="last24">
<!-- third nested tab -->
<div class="tabGroup3">
<input type="radio" name="tabGroup3" id="rad31" class="last24" checked="checked"/>
<input type="radio" name="tabGroup3" id="rad32" class="last7"/>
<input type="radio" name="tabGroup3" id="rad33" class="last30"/>
<div class="tablabels3">
<label for="rad31">Last 24 Hours</label>
<label for="rad32">Last 7 Days</label>
<label for="rad33">Last 30 Days</label>
</div>
<div class="tabcontent3">
<div class="last24">Most Popular - 24 Hours</div>
<div class="last7">Most Popular - 7 Days</div>
<div class="last30">Most Popular - 30 Days</div>
</div>
</div>
<!-- end third nested tab -->
</div>
<div class="last7">Most Popular - 7 Days</div>
<div class="last30">Most Popular - 30 Days</div>
</div>
</div>
</div>
<div class="tab2">Tab 2 content</div>
<div class="tab3">Tab 3 content</div>
<div class="tab4">Tab 4 content</div>
<div class="tab5">Tab 5 content</div>
<div class="tab6">Tab 6 content</div>
<div class="tab7">Tab 7 content</div>
</div>
</div>
</body>
</html>
The code is very cumbersome and relies on matching input ids to labels and then to targets. All of which have to be hard coded into the css and for nested tabs that is too cumbersome a method.
You would be better off using JS/Jquery to accomplish this and simplify the html, css and logic.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.