Collapasable divs

Pure CSS

by pphheerroonn

HTML

<div class="tab">
      <input id="tabOne" type="checkbox" name="tabs">
      <label for="tabOne">Description</label>
      <div class="tabContent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
</div>
<div class="tab">
      <input id="tabTwo" type="checkbox" name="tabs">
      <label for="tabTwo">Need to Know</label>
      <div class="tabContent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
</div>
<div class="tab">
      <input id="tabThree" type="checkbox" name="tabs">
      <label for="tabThree">What else</label>
      <div class="tabContent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
</div>

CSS

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #222;
  overflow: hidden;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #f2f2f2;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.tab .tabContent {
  max-height: 0;
  overflow: hidden;
  background: white;
  -webkit-transition: max-height 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         max-height 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tab .tabContent p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tabContent {
  max-height: 12em;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0; top: 0;
  display: block;
  width: 2em;
  height: 2em;
  line-height: 1.9;
  text-align: center;
  vertical-align:middle;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tab input[type=checkbox] + label::after {
  content: "+";
  font-size: 1.6em;
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(45deg);
}