The first version is very simplified. The second one shows some more styling possibilities. Makes me wish there were "appearance" properties for tabs, etc.). Also, the box underneath the tabs has to be positioned absolutely (otherwise it would be inserted between tabs), which is less than ideal, as it has to have a fixed height in order to be in the flow. Maybe someday I could use 'move-to" to put the contents into something that wasn't positioned and could therefore be part of the page flow.
This is a proof-of-concept that uses radio buttons and CSS to simulate tabs. There is no JavaScript or server-side scripting involved at all.
FireFox 3.0b3
FireFox 2 (doesn't support inline-block)
Safari 3 (but doesn't change when checkbox changes)
Opera 9.26
IE7 (untested)
That's Cool!
I didn't think that was possible!
Are you sure there's no JavaScript?
How come this doesn't work in IE6 (a.k.a. "the Internet")?
So what?
These stupid radio buttons don't have labels!
Wah! I don't like absolute positioning!
Wah! I don't like your font choice/size/color/etc.!
Wah! I'm a purist, and it must be perfect in all ways!
Here's the CSS for the simple one above
(radio buttons visible):
* { font-size:14px; /* not required */ }
input {
/* normally not displayed */
/* shown for demonstration */
opacity:.3;
margin-right:-.7em;
margin-left:0em;
overflow:visible;
}
.alltabs { border:1px dotted #ddd; height:219px;}
input + label
{
display: inline-block;
padding: 6px 8px 10px 24px;
border: 1px solid;
background-color: #aaa;
height: 8px;
margin:0;
line-height: 12px;
position:relative;
}
input + label + div
{
margin:0;
margin-top:2px;
padding: 16px;
border: 1px solid;
width: 25em;
height: 160px;
position: absolute;
top: 32px;
display: none;
}
input:checked + label + div { display:block; }
input:checked + label {
background-color:yellow;
z-index:3;
border-bottom-color:#fff;
}
View source for the CSS, or click on the third tab of the bottom box. Note: This technique is similar to the folding tree list I created that uses checkboxes and their labels to open and close each level.