pure CSS, accessable, tabbed content

<style>
dl.tabs {
    position: relative;
    width: 50%;
}
dl.tabs dt {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-bottom-color .5s linear;
}
dl.tabs dd {
    position: absolute;
    top: 2em;
    opacity: 0;
    overflow: hidden;
    transition: opacity .5s ease;
    box-sizing: border-box;
}
dl.tabs dt:hover, dl.tabs dt:focus {
    outline: 0;
    border-bottom-color: #555;
}
dl.tabs dt:focus + dd {
    opacity: 1;
}
</style>

<dl class="tabs">
    <dt tabindex="0">Tab 1</dt>
    <dd>Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.</dd>
    <dt tabindex="0">Tab 2</dt>
    <dd>The content of the second Tab. The content of the second Tab. The content of the second Tab. The content of the second Tab.</dd>
    <dt tabindex="0">Tab 3</dt>
    <dd>Tab 3 content. Tab 3 content. Tab 3 content. Tab 3 content.</dd>
    <dt tabindex="0">Tab 4</dt>
    <dd>The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab.</dd>
</dl>

You can in fact use the Tab key to access each tab container. Here is a demo: http://jsfiddle.net/feeela/jZeCL/