accordion - tabs flexbox

by marusti

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="worko-tabs">

  <input class="state" type="radio" title="tab-one" name="tabs-state" id="tab-one" checked/>
  <input class="state" type="radio" title="tab-two" name="tabs-state" id="tab-two" />
  <input class="state" type="radio" title="tab-three" name="tabs-state" id="tab-three" />

  <div class="tabs flex-tabs">
    <label for="tab-one" id="tab-one-label" class="tab">Tab One</label>
    <label for="tab-two" id="tab-two-label" class="tab">Tab Two</label>
    <label for="tab-three" id="tab-three-label" class="tab">Tab Three</label>


    <div id="tab-one-panel" class="panel active">
      <h3>Responsive CSS Tabs - Flexbox</h3>
      <p>CSS only tabs built using flexbox, when the viewport drops below 600px wide the tabs turn into an accordion by chaging the flex order of the elements.</p>
    </div>
    <div id="tab-two-panel" class="panel">
      <p>
        Tab two content
      </p>
    </div>
    <div id="tab-three-panel" class="panel">
      <p>
        Tab three content
      </p>
    </div>
  </div>

</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.worko-tabs {
  width: 100%;
}

.worko-tabs .state {
  position: absolute;
  display: none;
}

.worko-tabs .flex-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.worko-tabs .flex-tabs .tab {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.worko-tabs .tab {
  display: inline-block;
  line-height: 3em;
  padding: 0 0 0 1em;
  vertical-align: top;
  background-color: #3c8dc5;
  color: #fff;
  cursor: hand;
  cursor: pointer;
}

.worko-tabs .flex-tabs .panel {
  background-color: #fff;
  /*padding:20px;*/
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  width: 100%;
  flex-basis: auto;
}

.panel p {
  padding: 20px
}

.flex-tabs {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-tabs .tab {
  background-color: #3c8dc5;
  border-bottom: 1px solid #fff;
}

.flex-tabs .tab:last-of-type {
  border-bottom: none;
}

.flex-tabs #tab-one-label {
  -webkit-box-ordinal-group: 2;
  order: 1;
}

.flex-tabs #tab-two-label {
  -webkit-box-ordinal-group: 4;
  order: 3;
}

.flex-tabs #tab-three-label {
  -webkit-box-ordinal-group: 6;
  order: 5;
}

.flex-tabs #tab-one-panel {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.flex-tabs #tab-two-panel {
  -webkit-box-ordinal-group: 5;
  order: 4;
}

.flex-tabs #tab-three-panel {
  -webkit-box-ordinal-group: 7;
  order: 6;
}

#tab-one:checked~.tabs #tab-one-label,
#tab-two:checked~.tabs #tab-two-label,
#tab-three:checked~.tabs #tab-three-label {
 ...