Template:Test: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
< | <html> | ||
<div class="tabset"> | |||
<!-- Tab 1 --> | |||
<input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked> | |||
</ | <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> |
Revision as of 19:02, 23 April 2022