Accordion with custom arrow that changes direction

The simplest way to create an accordion may be to use details / summary.

However, to have custom arrows that changes direction without prefixed hacks like -webkit-details-marker, you need to use the radio trick.

HTML

<ul>
  <li>
    <input type="checkbox" id="faq-1">
    <h2>
      <label for="faq-1">First</label>
    </h2>
    <p>Gummies marzipan croissant chupa chups.</p>
  </li>

  <li>
    <input type="checkbox" id="faq-2">
    <h2>
      <label for="faq-2">Second</label>
    </h2>
    <p>Cookie bear claw carrot cake croissant.</p>
  </li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

label {
  display: flex;
  align-items: center;
}

label:before {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ h2 label:before {
  transform: rotate(90deg);
}

p {
  display: none;
}

input[type=checkbox]:checked ~ h2 ~ p {
  display: block;
}

Sources

• http://dabblet.com/gist/1507019