Radio Toggles
In this demo, labels for hidden radios toggle the content. This is based on the behavior in which clicked labels for a radio or checkbox input will check that input.
<input id="radio-1" type="radio" name="demo-radios"> <input id="radio-2" type="radio" name="demo-radios">#radio-1: #radio-2:
<label for="radio-1">Toggle #radio-1</label> <label for="radio-2">Toggle #radio-2</label>
Click one of the labels above and see its effect on the radios above it.
The radios for this pen's tabs are displayed semi-transparently at the top of this demo page.
Input :checked
In CSS, you can query based on the :checked selector for radios and checkboxes to style siblings down the DOM scope. To do this, we can use the ~. It will select same-level siblings after the given selector. Because the tab labels in this demo are nested and not immediate siblings, we will need to select their topmost parent that is at the same level as our input.
To demonstrate, we will do a simplified version of this with a checkbox:
<!-- invisible input and its label --> <input id="demo-child-toggle" type="checkbox"> <label for="demo-child-toggle">Toggle #demo-child</label> <-- parent to select first via "~" --> <div id="demo-parent"> <-- child to select through parent --> <div id="demo-child">#demo-child</div> </div>
and in our CSS:
/* hiding our checkbox */
#demo-child-toggle {
display: none;
}
/* selecting the child */
#demo-child-toggle:checked ~ #demo-parent #demo-child {
color: #c0392b;
font-weight: bold;
text-transform: uppercase;
}
As you can see, we can control the style of content that comes after a hidden input by toggling it via its label.
At this point you can probably get the picture for how we can conditionally display the tabbed panel content in this pen.