Post

HTML5 Accordion cheatsheet

Posted Updated
By Daniel Florido
6 min read

The style and HTML Code

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>

UX

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

SEO Friendly Accordions

Are HTML5 Accordions better for SEO then Javascript based Accordions?

They short answers is Yes. Because they are natively more accessible the js for search engines.

HTML5 accordions and JavaScript-based accordions can both be SEO-friendly if implemented correctly. The key factor for SEO is ensuring that search engines can crawl and index the content within the accordion. Here are some considerations for both approaches:

Why use html5 accordions over js based accordions?

  1. HTML5 Accordions:
  • HTML5 provides native elements like <details> and <summary> that can be used to create accordions without relying on JavaScript.
  • Search engines generally interpret and index content within these native elements, making it accessible for SEO.
  1. JavaScript-based Accordions:
  • JavaScript-based accordions can be SEO-friendly if implemented with progressive enhancement. This means that the content is initially accessible without JavaScript, and JavaScript is used to enhance the user experience.
  • Use proper semantic HTML elements for better accessibility and SEO.
  • Implement server-side rendering (SSR) or pre-rendering techniques to ensure that search engines can access the content.

Both HTML5 accordions and JavaScript-based accordions can be SEO-friendly. The key is to provide accessible and meaningful content that search engines can crawl and index. It’s also crucial to use semantic HTML elements and ensure that content is available without relying solely on JavaScript.

1
2
3
4

<details>
  <summary>Title</summary>
  Content goes here.
</details>
  • Ensure that the content within the accordion is relevant and meaningful for SEO.

HTML5 accordions and JavaScript accordions serve similar purposes but are implemented using different technologies. Let’s explore the advantages of using HTML5 accordions over JavaScript accordions:

  1. Semantic Structure:
  • HTML5 accordions use semantic markup with elements like <details> and <summary>, which convey the intended structure and purpose of the accordion directly in the HTML code.
  • JavaScript accordions often require additional <div> elements and custom attributes to create the accordion structure, which can be less semantically meaningful.
  1. Accessibility:
  • HTML5 accordions are designed with accessibility in mind. They come with built-in keyboard navigation and screen reader support, making them more accessible to users with disabilities.
  • While it’s possible to make JavaScript accordions accessible, it often requires additional effort to ensure proper keyboard focus, ARIA attributes, and other accessibility features.
  1. Less Code:
  • HTML5 accordions require less code compared to JavaScript-based solutions. The basic structure is achieved with minimal HTML markup, reducing the overall complexity of the codebase.
  • JavaScript accordions typically involve more scripting and styling to achieve the desired functionality, potentially leading to a larger codebase.
  1. Ease of Maintenance:
  • HTML5 accordions are simpler and easier to maintain because they rely on native browser functionality for the accordion behavior. Browser updates and improvements can benefit HTML5 accordions automatically.
  • JavaScript accordions may need regular updates and adjustments to maintain compatibility with different browsers and to incorporate new features or improvements.
  1. Performance:
  • HTML5 accordions generally have better performance because they leverage native browser features. The browser can optimize the rendering and behavior of HTML5 accordions, leading to a smoother user experience.
  • JavaScript accordions may introduce additional processing overhead, especially for larger and more complex accordion implementations.
  1. Progressive Enhancement:
    • HTML5 accordions provide a baseline functionality that works even if JavaScript is disabled in the browser, promoting a progressive enhancement approach.
    • JavaScript accordions may rely heavily on script execution, and their functionality might be compromised if JavaScript is disabled, potentially affecting users with older browsers or those who deliberately disable JavaScript for security reasons.

HTML5 accordions are preferred when simplicity, accessibility, and semantic markup are essential. JavaScript accordions may be chosen for more customized and dynamic behavior, but they come with additional considerations for accessibility and maintenance. Often, a combination of both HTML5 and JavaScript may be used to achieve a balance between simplicity and enhanced functionality.

Styling your html5 accordions so they look great

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.