<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;
    }

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.