HTML tab interface using only CSS

Question

is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with CSS 3.0?

Answer 1

:target is generally the preferred way of doing tabs.

You can also be clever with input:radio, or input:checkbox elements.

http://jsfiddle.net/nzYnc/

HTML:

One
Two
Three



    First content



    Second content



    Third content

CSS:

input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

Using the next-sibling (+) and :checked selectors in clever ways can allow you to do a pure CSS accordion, toggleable lists, or tabs like this.