Post

HTML5 Accordion CSS and HTML

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”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
<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>
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.