HTML5 Accordion cheatsheet

UX

• Make them open fast. “slow release” accordions are annoying and make website feel sluggish.

Coding

The tricky part with the HTML5 Accordions for me was styling the pseudo marker element. Trying to customise this element to be a ‘Plus icon’ rather then a blocky triangle was not working for me. What i ended up doing was hiding the marker and adding in my own “after” pseodo element in which i could apply my “plus icon”.

.accordion__title {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font-weight: 800;
  @include h6-size();
  width: 100%;
  flex-direction: row;
  cursor: pointer;

  &:after {
    content: "\002B";
    font-size: rem(25px);
    display: block;
    width: 20px;
    height: 20px;
  }
}
details[open] .accordion__title {
  &:after {
    content: "\002D";
  }
}
.accordion__content {
  padding-bottom: 30px;
}

.accordion__title::marker {
  //hide the marker
  content: "";
}

// hide the marker in safari
summary::-webkit-details-marker {
  display: none;
}

.accordion__title {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font-weight: 800;
  font-size: 25px;
  width: 100%;
  flex-direction: row;
  cursor: pointer;
}

.accordion__title::after {
  content: "\002B";
  font-size: 25px;
  display: block;
  width: 20px;
  height: 20px;
}
.accordion__content {
  padding-bottom: 30px;
}
details[open] .accordion__title::after {
  content: "\002D";
}

.accordion__title::marker {
  content: "";
}

summary::-webkit-details-marker {
  display: none;
}

<details>
  <summary class="accordion__title">title</summary>
  <div class="accordion__content">
    <p>content</p>
  </div>
</details>
<details>
  <summary class="accordion__title">Title</summary>
  <div class="accordion__content">
    <p>content</p>
  </div>
</details>