Last active
August 29, 2015 13:58
-
-
Save feeela/9958745 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can in fact use the
Tab
key to access each tab container. Here is a demo: http://jsfiddle.net/feeela/jZeCL/