<h2>Two Tabs</h2>
<dl role="tablist" id="tablist-1">
<input type="checkbox" id="tablist-1-more-control" hidden>
<dt tabindex="-1" role="tab" id="tablist-1-more" aria-hidden><label for="tablist-1-more-control"></label></dt>
<input type="radio" name="tablist-1" id="tablist-1-tab-1-control" checked hidden>
<dt tabindex="0" role="tab" id="tablist-1-tab-1"><label for="tablist-1-tab-1-control">Tab 1</label></dt>
<dd role="tabpanel" id="tablist-1-tabpanel-1">I am tab panel 1</dd>
<input type="radio" name="tablist-1" id="tablist-1-tab-2-control" hidden>
<dt tabindex="0" role="tab" id="tablist-1-tab-2"><label for="tablist-1-tab-2-control">Tab 2</label></dt>
<dd role="tabpanel" id="tablist-1-tabpanel-2">I am tab panel 2</dd>
</dl>
<h2>Three Tabs</h2>
<dl role="tablist" id="tablist-2">
<input type="checkbox" id="tablist-2-more-control" hidden>
<dt tabindex="-1" role="tab" id="tablist-2-more" aria-hidden><label for="tablist-2-more-control"></label></dt>
<input type="radio" name="tablist-2" id="tablist-2-tab-1-control" checked hidden>
<dt tabindex="0" role="tab" id="tablist-2-tab-1"><label for="tablist-2-tab-1-control">Tab 1</label></dt>
<dd role="tabpanel" id="tablist-2-tabpanel-1">I am tab panel 1</dd>
<input type="radio" name="tablist-2" id="tablist-2-tab-2-control" hidden>
<dt tabindex="0" role="tab" id="tablist-2-tab-2"><label for="tablist-2-tab-2-control">Tab 2</label></dt>
<dd role="tabpanel" id="tablist-2-tabpanel-2">I am tab panel 2</dd>
<input type="radio" name="tablist-2" id="tablist-2-tab-3-control" hidden>
<dt tabindex="0" role="tab" id="tablist-2-tab-3"><label for="tablist-2-tab-3-control">Tab 3</label></dt>
<dd role="tabpanel" id="tablist-2-tabpanel-3">I am tab panel 3</dd>
</dl>
<h2>Four Tabs</h2>
<dl role="tablist" id="tablist-3">
<input type="checkbox" id="tablist-3-more-control" hidden>
<dt tabindex="-1" role="tab" id="tablist-3-more" aria-hidden><label for="tablist-3-more-control"></label></dt>
<input type="radio" name="tablist-3" id="tablist-3-tab-1-control" checked hidden>
<dt tabindex="0" role="tab" id="tablist-3-tab-1"><label for="tablist-3-tab-1-control">Tab 1</label></dt>
<dd role="tabpanel" id="tablist-3-tabpanel-1">I am tab panel 1</dd>
<input type="radio" name="tablist-3" id="tablist-3-tab-2-control" hidden>
<dt tabindex="0" role="tab" id="tablist-3-tab-2"><label for="tablist-3-tab-2-control">Tab 2</label></dt>
<dd role="tabpanel" id="tablist-3-tabpanel-2">I am tab panel 2</dd>
<input type="radio" name="tablist-3" id="tablist-3-tab-3-control" hidden>
<dt tabindex="0" role="tab" id="tablist-3-tab-3"><label for="tablist-3-tab-3-control">Tab 3</label></dt>
<dd role="tabpanel" id="tablist-3-tabpanel-3">I am tab panel 3</dd>
<input type="radio" name="tablist-3" id="tablist-3-tab-4-control" hidden>
<dt tabindex="0" role="tab" id="tablist-3-tab-4"><label for="tablist-3-tab-4-control">Tab 4</label></dt>
<dd role="tabpanel" id="tablist-3-tabpanel-4">I am tab panel 4</dd>
</dl>
<h2>Five Tabs</h2>
<dl role="tablist" id="tablist-4">
<input type="checkbox" id="tablist-4-more-control" hidden>
<dt tabindex="-1" role="tab" id="tablist-4-more" aria-hidden><label for="tablist-4-more-control"></label></dt>
<input type="radio" name="tablist-4" id="tablist-4-tab-1-control" checked hidden>
<dt tabindex="0" role="tab" id="tablist-4-tab-1"><label for="tablist-4-tab-1-control">Tab 1</label></dt>
<dd role="tabpanel" id="tablist-4-tabpanel-1">I am tab panel 1</dd>
<input type="radio" name="tablist-4" id="tablist-4-tab-2-control" hidden>
<dt tabindex="0" role="tab" id="tablist-4-tab-2"><label for="tablist-4-tab-2-control">Tab 2</label></dt>
<dd role="tabpanel" id="tablist-4-tabpanel-2">I am tab panel 2</dd>
<input type="radio" name="tablist-4" id="tablist-4-tab-3-control" hidden>
<dt tabindex="0" role="tab" id="tablist-4-tab-3"><label for="tablist-4-tab-3-control">Tab 3</label></dt>
<dd role="tabpanel" id="tablist-4-tabpanel-3">I am tab panel 3</dd>
<input type="radio" name="tablist-4" id="tablist-4-tab-4-control" hidden>
<dt tabindex="0" role="tab" id="tablist-4-tab-4"><label for="tablist-4-tab-4-control">Tab 4</label></dt>
<dd role="tabpanel" id="tablist-4-tabpanel-4">I am tab panel 4</dd>
<input type="radio" name="tablist-4" id="tablist-4-tab-5-control" hidden>
<dt tabindex="0" role="tab" id="tablist-4-tab-5"><label for="tablist-4-tab-5-control">Tab 5</label></dt>
<dd role="tabpanel" id="tablist-4-tabpanel-5">I am tab panel 5</dd>
</dl>
<h2>Six Tabs</h2>
<dl role="tablist" id="tablist-5">
<input type="checkbox" id="tablist-5-more-control" hidden>
<dt tabindex="-1" role="tab" id="tablist-5-more" aria-hidden><label for="tablist-5-more-control"></label></dt>
<input type="radio" name="tablist-5" id="tablist-5-tab-1-control" checked hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-1"><label for="tablist-5-tab-1-control">Tab 1</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-1">I am tab panel 1</dd>
<input type="radio" name="tablist-5" id="tablist-5-tab-2-control" hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-2"><label for="tablist-5-tab-2-control">Tab 2</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-2">I am tab panel 2</dd>
<input type="radio" name="tablist-5" id="tablist-5-tab-3-control" hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-3"><label for="tablist-5-tab-3-control">Tab 3</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-3">I am tab panel 3</dd>
<input type="radio" name="tablist-5" id="tablist-5-tab-4-control" hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-4"><label for="tablist-5-tab-4-control">Tab 4</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-4">I am tab panel 4</dd>
<input type="radio" name="tablist-5" id="tablist-5-tab-5-control" hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-5"><label for="tablist-5-tab-5-control">Tab 5</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-5">I am tab panel 5</dd>
<input type="radio" name="tablist-5" id="tablist-5-tab-6-control" hidden>
<dt tabindex="0" role="tab" id="tablist-5-tab-6"><label for="tablist-5-tab-6-control">Tab 6</label></dt>
<dd role="tabpanel" id="tablist-5-tabpanel-6">I am tab panel 6</dd>
</dl>
[role=tablist] {
box-sizing:border-box;
position:relative;
width:800px;
height:400px;
}
[role=tab] {
box-sizing:border-box;
position:relative;
z-index:2;
float:left;
line-height:20px;
white-space:nowrap;
text-overflow:ellipsis;
background-color:lightblue;
text-align: center;
border:1px solid #333;
}
[role=tab] label {
display:block;
}
[role=tab]:first-of-type label:before {
content:"More ...";
}
[role=tabpanel] {
box-sizing:border-box;
position:absolute;
top:20px;
left:0;
right:0;
bottom:0;
float:right;
border:1px solid #333;
border-top:none;
margin:0;
padding:2px;
}
[type=radio]:checked + [role=tab] {
background: white;
border-bottom:1px solid white;
}
[type=radio]:not(:checked) + [role=tab] + [role=tabpanel] {
display:none;
}
[type=radio]:checked + [role=tab] + [role=tabpanel] {
display:block;
}
[role=tab]:first-of-type {
float:right;
width:10%;
}
/* if the 'more ...' tab is one of the last 6, hide it. */
[role=tab]:first-of-type:nth-last-of-type(-n+6) {
display:none;
}
/* only one or two visible tabs */
[role=tab]:first-of-type:nth-last-of-type(2) ~ [role=tab],
[role=tab]:first-of-type:nth-last-of-type(3) ~ [role=tab] {
width:50%;
}
/* only three visible tabs */
[role=tab]:first-of-type:nth-last-of-type(4) ~ [role=tab] {
width:33.333%
}
/* only four visible tabs */
[role=tab]:first-of-type:nth-last-of-type(5) ~ [role=tab] {
width:25%;
}
/* only five visible tabs */
[role=tab]:first-of-type:nth-last-of-type(6) ~ [role=tab] {
width:20%;
}
/* more than 5, show the first 3 tabs */
[role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [role=tab]:nth-of-type(-n+4)
{
width:22.5%;
}
/* more than 5,
hide the 4th if neither it nor one of it's predicesors are selected
and any of the following ones that aren't specifically selected. */
[role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [type=radio]:not(:checked) ~ [role=tab]:nth-of-type(5),
[role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [type=radio]:not(:checked) + [role=tab]:nth-of-type(n+6)
{
display:none;
width:20%;
float:right;
clear:right;
}
/* more then 5,
show the hidden "extra" ones if 'more ...' is clicked */
[type=checkbox]:checked + [role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [role=tab]:nth-of-type(n+5)
{
display:block;
}
/* more then 5,
show either the 4th if one of the first four is selected
or any of the others, if they are selected */
[role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [type=radio]:checked ~ [role=tab]:nth-of-type(5),
[role=tab]:first-of-type:not(:nth-last-of-type(-n+6)) ~ [type=radio]:checked + [role=tab]:nth-of-type(n+6) {
display:block;
float:left;
clear:none;
width:22.5%;
}
/* more than 5,
placement fix for if one of the 4th + tab is both selected and extras are shown */
[type=checkbox]:checked ~ [type=radio]:checked + [role=tab]:nth-of-type(n+5) {
position:absolute;
right:10%;
top:0;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.