The architecture of this CSS is not the best at the time of maintenance, because it depends on the amount of intermediate elements for each flap. If you generate dynamically, with a server-side language fine, but to update manually, you need to be well-acquainted with the operation.
First of all, see working with 4 tabs:
.tabs input[type='radio'] {
display:none
}
.tabs label {
width:100px;
text-align:center;
padding: 20px;
color:#666666;
display:inline-block;
cursor:pointer;
}
.tab-content {
display:none;
background-color:#F3F3F3;
border-top:6px #FE7B43 solid;
text-align:center;
padding:50px 0;
position:relative;
}
#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }
<div class="tabs" id="tabs-1">
<input id="tab-1-1" name="tabs-group-1" type="radio" checked />
<input id="tab-1-2" name="tabs-group-1" type="radio" />
<input id="tab-1-3" name="tabs-group-1" type="radio" />
<input id="tab-1-4" name="tabs-group-1" type="radio" />
<label for="tab-1-1">ABA 1</label>
<label for="tab-1-2">ABA 2</label>
<label for="tab-1-3">ABA 3</label>
<label for="tab-1-4">ABA 4</label>
<!-- Aba 1 -->
<div class="tab-content">
asdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdf
</div>
<!-- Aba 2 -->
<div class="tab-content">
CONTEUDO ABA 2
</div>
<!-- Aba 3 -->
<div class="tab-content">
CONTEUDO ABA 3
</div>
<!-- Aba 4 -->
<div class="tab-content">
CONTEUDO ABA 4
</div>
</div>
To work, these lines have been adjusted
#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }
A% w / w% more in the first row, for each tab, and two in the second row.
A more scalable solution would be to place the checkboxes before each tab, and use the%
Refactoring to work independent of the number of tabs
The technique is the same, but I have reordered the fields and CSS so each radiobutton is always the same distance from its respective tab and its contents. To increase or decrease the number of tabs, simply replicate the blocks of + * + + + radio .
The only caution is to make all tabs fit on the same line.
.tabs input[type='radio'] {
display:none;
position:absolute;
left:-100px;
}
.tabs label {
width:60px;
text-align:center;
padding: 20px;
color:#666666;
display:inline-block;
cursor:pointer;
}
.tab-content {
display:none;
position:absolute;
left:0;
width:100%;
background-color:#F3F3F3;
border-top:6px #FE7B43 solid;
text-align:center;
padding:50px 0;
}
#tabs-1 {position:relative}
#tabs-1 :checked + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + label + .tab-content { display: block }
<div class="tabs" id="tabs-1">
<input id="tab-1-1" name="tabs-group-1" type="radio" checked />
<label for="tab-1-1">ABA 1</label>
<div class="tab-content">
CONTEUDO ABA 1
</div>
<input id="tab-1-2" name="tabs-group-1" type="radio" />
<label for="tab-1-2">ABA 2</label>
<div class="tab-content">
CONTEUDO ABA 2
</div>
<input id="tab-1-3" name="tabs-group-1" type="radio" />
<label for="tab-1-3">ABA 3</label>
<div class="tab-content">
CONTEUDO ABA 3
</div>
<input id="tab-1-4" name="tabs-group-1" type="radio" />
<label for="tab-1-4">ABA 4</label>
<div class="tab-content">
CONTEUDO ABA 4
</div>
<input id="tab-1-5" name="tabs-group-1" type="radio" />
<label for="tab-1-5">ABA 5</label>
<div class="tab-content">
CONTEUDO ABA 5
</div>
</div>
