Hi there!
I’ve received some great help from you guys on here with the work I’ve been doing lately. So I’d like to pick your brains again if you don’t mind.
I’m trying to get some Nested Tabs to work. Basically, it’s for a set of “Top Lists” so when you click on a category, you’re then given 3 sub-categories and then finally (when you choose one) you’re given the data for that sub-category.
I’ve almost got it working!
The first level of “tabs” is working great. I can select a category and the second level opens up giving me the sub categories - but the third level is not opening up when I choose a sub category, neither is the “checked” option showing up by default as it is for the main category. They are there and they are correctly positioned but it still has the “display: none” rule applied to it even though the CSS rule to change it to “inline-block” when checked is present and correct as far as I can see.
I hope I’ve explained it properly - It may be easier to show you:
http://cbresources.uk/lycos/toplists.php
So as you can see - Most Popular Females is “checked” by default so when you load the page, the 3 subcategories for that are showing to the right (24 hours, 7 days and 30 days) - However, there is a 3rd section which should be showing to the right of that which should be the data for the “24 Hours” option. This should then change when I choose 7 days or 30 days like it does it I choose a different main category.
This is the HTML I am using:
<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="2rad1" class="last24" checked="checked"/>
<input type="radio" name="tabGroup2" id="2rad2" class="last7"/>
<input type="radio" name="tabGroup2" id="2rad3" class="last30"/>
<div class="tablabels2">
<label for="2rad1">Last 24 Hours</label>
<label for="2rad2">Last 7 Days</label>
<label for="2rad3">Last 30 Days</label>
</div>
<div class="tabcontent2">
<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> </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>
And here is the CSS:
.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 *******/
.tabGroup2 {
font: 10pt arial, verdana;
width: 100%;
}
.tabGroup2 > input[type="radio"] {
position: absolute;
left:-100px;
}
.tabGroup2 > div.tablabels2 {
display: inline-block;
vertical-align: top;
width:33%;
margin-right:-5px;
}
.tabGroup2 > div.tablabels2 > 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;
}
.tabGroup2 > input#2rad1:checked ~ div.tablabels2 > label[for="2rad1"],
.tabGroup2 > input#2rad2:checked ~ div.tablabels2 > label[for="2rad2"],
.tabGroup2 > input#2rad3:checked ~ div.tablabels2 > label[for="2rad3"] {
background-color:white;
font-weight: bold;
border-right: none;;
position:relative;
}
.tabGroup2 > div.tabcontent2 {
display: inline-block;
width: 33%;
}
.tabGroup2 > div.tabcontent2 > 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 > .2tab1:checked ~ div.tabcontent2 > .last24,
.tabGroup2 > .2tab2:checked ~ div.tabcontent2 > .last7,
.tabGroup2 > .2tab3:checked ~ div.tabcontent2 > .last30 {
display: inline-block;
min-height: 400px;
}
It may be a bit “chunky” because I’m still in the first stages of building this so I haven’t had a chance to “minimize” it yet but I will be doing that once I get it looking how I want it to.
I can’t understand why it’s not working because “.tabGroup2 > .2tab1:checked ~ div.tabcontent2 > .last24,” is set to display: inline-block like it should be so if that one is “checked” by default it should be applying that rule but instead it is still applying the rule for “.tabGroup2 > div.tabcontent2 > div” which has is “display: none”
I changed it as suggested and it’s working perfectly now