|
|
Line 1: |
Line 1: |
| <html> | | <tabber> |
| <div class="tabset">
| | Test=test |
| <!-- Tab 1 -->
| | Test2=test 2 |
| <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
| | </tabber> |
| <label for="tab1">DDX</label>
| |
| <!-- Tab 2 -->
| |
| <input type="radio" name="tabset" id="tab2" aria-controls="rauchbier">
| |
| <label for="tab2">Features</label>
| |
| <div class="tab-panels">
| |
| <section id="DDX" class="tab-panel">{{{1}}}</section>
| |
| <section id="features" class="tab-panel">{{{2}}}</section>
| |
| </div>
| |
| </div>
| |
| <style>
| |
| /*
| |
| CSS for the main interaction
| |
| */
| |
| .tabset > input[type="radio"] {
| |
| position: absolute;
| |
| left: -200vw;
| |
| }
| |
| | |
| .tabset .tab-panel {
| |
| display: none;
| |
| }
| |
| | |
| .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
| |
| .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
| |
| .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
| |
| .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
| |
| .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
| |
| .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
| |
| display: block;
| |
| }
| |
| | |
| /*
| |
| Styling
| |
| */
| |
| .tabset > label {
| |
| position: relative;
| |
| display: inline-block;
| |
| padding: 15px 15px 25px;
| |
| border: 1px solid transparent;
| |
| border-bottom: 0;
| |
| cursor: pointer;
| |
| font-weight: 600;
| |
| }
| |
| | |
| .tabset > label::after {
| |
| content: "";
| |
| position: absolute;
| |
| left: 15px;
| |
| bottom: 10px;
| |
| width: 22px;
| |
| height: 4px;
| |
| background: #8d8d8d;
| |
| }
| |
| | |
| .tabset > label:hover,
| |
| .tabset > input:focus + label {
| |
| color: #06c;
| |
| }
| |
| | |
| .tabset > label:hover::after,
| |
| .tabset > input:focus + label::after,
| |
| .tabset > input:checked + label::after {
| |
| background: #06c;
| |
| }
| |
| | |
| .tabset > input:checked + label {
| |
| border-color: #ccc;
| |
| border-bottom: 1px solid #fff;
| |
| margin-bottom: -1px;
| |
| }
| |
| | |
| .tab-panel {
| |
| padding: 30px 0;
| |
| border-top: 1px solid #ccc;
| |
| }
| |
| | |
| /*
| |
| Demo purposes only
| |
| */
| |
| *,
| |
| *:before,
| |
| *:after {
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .tabset {
| |
| max-width: 65em;
| |
| }
| |
| </style>
| |
| </html> | |