Hi all
I have a demo here - http://www.ttmt.org.uk/tab.html
It’s a smiple tabbed menu using radio buttons
The html is like this
<div class="tab-group">
<input type="radio" name="tag-group-1" id="rad-1" checked="checked" />
<label for="rad-1">Business</label>
<input type="radio" name="tag-group-1" id="rad-2" />
<label for="rad-2">Personal</label>
<div class="tab-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tab-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
</div>
</div>
The css to display the content is like this
#rad-1:checked ~ .tab-1,#rad-2:checked ~ .tab-2{
display:block;
}
It’s using the sibling combinator selector to select the div following the radio button
If I had the radio buttons in a separate div like so
<div class="tab-group">
<div class="tab-nav">
<input type="radio" name="tag-group-1" id="rad-1" checked="checked" />
<label for="rad-1">Business</label>
<input type="radio" name="tag-group-1" id="rad-2" />
<label for="rad-2">Personal</label>
</div>
<div class="tab-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tab-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
</div>
</div>
What selector would I use to select .tab-1 or tab-2
I know I could do this with jquery but can I do it with CSS?