HTML Only Accordion

html-only-accordion.markdown

HTML Only Accordion

Exploring styling the HTML Details and Summary tags to create functional accordion without any javascript.

A Pen by Frederick Allen on CodePen.

License.

index.html

<section>
  <h1>
    Hypertext Accordion
  </h1>
  <details>
    <summary>Details</summary>
    <p>
      Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex.
    </p>
  </details>
  <details>
    <summary>Features</summary>
    <p>
      Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex.
    </p>
  </details>
  <details>
    <summary>Information
    </summary>
    <p>Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex. </p>
  </details>
  <details>
    <summary>Specifications
    </summary>
    <p>Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex. </p>
  </details>
</section>

style.css

html,
.root {
  padding: 0;
  margin: 0;
  font-size: 18px;
}

body {
  font: menu;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}
section {
  padding-top: 4rem;
  width: 50%;
  margin: auto;
}
h1 {
  font-size: 2rem;
  font-weight: 500;
}
details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid black;
  position: relative;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 300;
  list-style: none;
}

details summary:after {
  content: "+";
  color: black;
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 200;
  transform-origin: center;
  transition: 200ms linear;
}
details[open] summary:after {
  transform: rotate(45deg);
  font-size: 2rem;
}
details summary {
  outline: 0;
}
details p {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
}