CSS only tabs using input:checked - html

Question

I found this example (the "checked" version) and it works:
http://jsfiddle.net/2cTwA/
But I want to wrap the input and labels inside a container element (like nav), and if I do that the tabs stop working :(
Is there any solution for this?
found solution: http://jsfiddle.net/2cTwA/7/

Answer 1

With a slight HTML and CSS modification - DEMO
CSS
input { display: none; }
nav { overflow: hidden }
label { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }
.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none }
HTML
<section class="tab-area tabs-checked">
<nav>
<input checked type="radio" name="tab" id="tab-A" />
<input type="radio" name="tab" id="tab-B" />
<input type="radio" name="tab" id="tab-C" />
<label class="tab-link" for="tab-A">Tab 1</label>
<label class="tab-link" for="tab-B">Tab 2</label>
<label class="tab-link" for="tab-C">Tab 3</label>
</nav>
<a name="tab3"></a>
<article class="tab">
<h3>Tab 3</h3>
</article>
<a name="tab2"></a>
<article class="tab">
<h3>Tab 2</h3>
</article>
<a name="tab1"></a>
<article class="tab">
<h3>Tab 1.</h3>
</article>
</section>

Answer 2

You're using the sibling selector (~), and by using a containing element such as nav, you are removing the inputs and labels from being siblings of the articles.
You simply need to rewrite your css where you use the tilde.

Answer 3

here is the sass example for 12(max) tabs using CSS only
.tabs {
input[type=radio] {
display: none;
#for $i from 1 through 12 {
&:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) {
display: block;
}
}
}
label {
cursor: pointer;
display: inline-block;
}
.tab {
display: none;
}
}
and here is the html markup
<div class="tabs">
<input name="controls" type="radio" id="controls-tab" checked="true"/>
<label for="controls-tab">controls</label>
<input name="controls" type="radio" id="panels-tab"/>
<label for="panels-tab">panels</label>
<input name="controls" type="radio" id="readme-tab"/>
<label for="readme-tab">readme</label>
<div class="content">
<div class="tab">
</div>
<div class="tab">
</div>
<div class="tab">
</div>
</div>
</div>
no need to relatively position tab divs inside content div. no need to set content height.