Responsive Accessible Accordion with CSS3 Transitions

Preview:

Description:

A pure CSS, responsive, accessible accordion that uses CSS3 transitions for smooth open / close animations. It uses checkbox + label or radio + label hacks for toggling accordion panels, depending on whether one or multiple panels can be open at the same time.

Basic usage:

Create an accordion using html unordered list and the checkbox hack. It means that multiple accordion panels can be opened at a same time.

<ul class="accordion css-accordion">
  <li class="accordion-item">
    <input class="accordion-item-input" type="checkbox" name="accordion" id="item1" />
    <label for="item1" class="accordion-item-hd">Accordion Heading 1<span class="accordion-item-hd-cta">&#9650;</span></label>
    <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div>
  </li>
  <li class="accordion-item">
    <input class="accordion-item-input" type="checkbox" name="accordion" id="item2" />
    <label for="item2" class="accordion-item-hd">Accordion Heading 2<span class="accordion-item-hd-cta">&#9650;</span></label>
    <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div>
  </li>
  <li class="accordion-item">
    <input class="accordion-item-input" type="checkbox" name="accordion" id="item3" />
    <label for="item3" class="accordion-item-hd">Accordion Heading 3<span class="accordion-item-hd-cta">&#9650;</span></label>
    <div class="accordion-item-bd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur architecto maxime, saepe repudiandae quidem quisquam aliquam cumque possimus inventore, deserunt nostrum, explicabo modi voluptatibus sed, labore quaerat. Accusamus, officiis. </div>
  </li>
</ul>

The required CSS / CSS3 styles.

.accordion {
  border: 1px solid white;
  padding: 0 10px;
  margin: 0 auto;
  list-style: none outside;
}
.accordion > * + * { border-top: 1px solid white; }
.accordion-item-hd {
  display: block;
  padding: 15px 30px 15px 0;
  position: relative;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}
.accordion-item-input:checked ~ .accordion-item-bd {
  max-height: 1000px;
  padding-top: 15px;
  margin-bottom: 15px;
  -webkit-transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
  transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}
.accordion-item-input:checked ~ .accordion-item-hd > .accordion-item-hd-cta {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}
.accordion-item-hd-cta {
  display: block;
  width: 30px;
  position: absolute;
  top: calc(50% - 6px );
  right: 0;
  pointer-events: none;
  -webkit-transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
  text-align: center;
  font-size: 12px;
  line-height: 1;
}
.accordion-item-bd {
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  -webkit-transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
  transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
.accordion-item-input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}