Tabs-001

Build a tab in CSS

by PaijoPapua

HTML

<div class="container">
  <input type="checkbox" id="ckTab" name="ckTab" checked />
  <div class="tabs">
    <div class="lblUk">
      <button class="lblUk-a">M/25</button>
      <button class="lblUk-b">S/40</button>
      <button class="lblUk-c">X/21</button>
      <button class="lblUk-d">L/45</button>
      <button class="lblUk-e">XL/50</button>
      <div class="ct-box">
        <div class="ct-a">a ct</div>
        <div class="ct-b">b ct</div>
        <div class="ct-c">c ct</div>
        <div class="ct-d">d ct</div>
        <div class="ct-e">e ct</div>
      </div>
    </div>
  </div>
</div>

CSS

input#ckTab{display: none;}
.tabs{width: 100%;}
button{position:relative;height:60px;background:#fff;cursor:pointer;}
.ct-box {text-align:left;}
.ct-box > div {display: none;}
.lblUk-a:focus-within ~ .ct-box .ct-a {display: block;}
.lblUk-b:focus-within ~ .ct-box .ct-b {display: block;}
.lblUk-c:focus-within ~ .ct-box .ct-c {display: block;}
.lblUk-d:focus-within ~ .ct-box .ct-d {display: block;}
.lblUk-e:focus-within ~ .ct-box .ct-e {display: block;}