accordion

by marusti

HTML

<div class="tabs">
  <label for="tab1">Tab1</label>
  <input type="radio" name="radio" id="tab1" />
  <div class="tabs-content tabs1 tab-default">
    <p>
      text Tab 1
    </p>
  </div>
  <label for="tab2">Tab2</label>
  <input type="radio" name="radio" id="tab2" />
  <div class="tabs-content tabs2">
    <p>
      text tab 2
    </p>

  </div>
  <label for="tab3">Tab3</label>
  <input type="radio" name="radio" id="tab3" />
  <div class="tabs-content tabs3">
    <p>
      text tab 3
    </p>

  </div>
</div>

CSS

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

.tabs {
  /*max-width: 700px;
	margin: 0 auto;
	padding: 0;*/
}

label {
  display: block;
  margin: 0 0 2px 0;
  padding: 12px;
  line-height: 1;
  color: #fff;
  background: #3c8dc5;
  cursor: pointer;
}

input {
  display: none;
}

.tabs-content {
  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;
}

.tabs-content p {
  padding: 12px
}

#tab1:checked ~ .tabs1,
#tab2:checked ~ .tabs2,
#tab3:checked ~ .tabs3 {
  max-height: 46px;
  opacity: 1;
}