How to Create Accordions Using Pure CSS with the <details> and <summary> Tags

Accordions are a great way to condense and organize content on a webpage, allowing users to expand and collapse sections as needed. Traditionally, JavaScript has been used to create accordions, but modern HTML and CSS capabilities allow developers to achieve the same result without relying on JavaScript at all. This approach not only simplifies the code but also enhances performance, especially on resource-constrained devices.

In this article, we will explore how to create a fully functional accordion using just HTML and CSS by leveraging the <details> and <summary> elements. These HTML5 tags were introduced specifically to handle content disclosure scenarios like accordions, making them the perfect choice for our task.

For those interested in following along with a live demo, you can find the complete implementation on CodePen here.

Why Pure CSS Accordions?

Before diving into the code, it’s important to understand the benefits of using pure CSS over JavaScript for an accordion. The main advantages include:

1. Performance: JavaScript can sometimes introduce performance bottlenecks, especially if it is manipulating the DOM or handling heavy calculations. CSS, on the other hand, runs natively in the browser and leverages optimized rendering engines.

2. Simplicity: Using HTML5 tags like <details> and <summary> drastically reduces the complexity of the code. With just a few lines of CSS, you can control the look and feel of the accordion without having to write custom JavaScript.

3. Accessibility: The <details> and <summary> tags come with built-in accessibility features. Screen readers can easily identify that these sections are collapsible, improving the user experience for those relying on assistive technologies.

4. SEO: Since the content in the accordion is rendered in the HTML from the start (even if hidden by default), search engines can index the content, providing better SEO results compared to JavaScript-controlled accordions where content may not be fully loaded initially.

How the <details> and <summary> Tags Work

The basic structure of an accordion using these HTML tags is very simple:

<details>
  <summary>Accordion Title</summary>
  <p>This is the content of the accordion.</p>
</details>

Breakdown

• <details>: This tag wraps the entire accordion block. It can hold both the trigger (the title) and the collapsible content. When a user clicks on the summary, the content inside the <details> tag will be expanded or collapsed automatically.

• <summary>: This is the clickable element, which acts as the title or label for the accordion. Clicking on it toggles the content inside the <details> element.

By default, the <details> element is closed. When a user clicks on the <summary>, the content is shown, and it collapses when clicked again.

Styling the Accordion with CSS

Although the default behavior of the <details> and <summary> elements is functional, they aren’t styled by default. With a few CSS tweaks, we can enhance the appearance and make the accordion more visually appealing.

Here’s a basic example of how you can style the accordion using pure CSS:

/* Base styles */
details {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* Styling the summary */
summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

/* Hover effect for summary */
summary:hover {
  color: #007bff;
}

/* Opened accordion details */
details[open] {
  background-color: #f9f9f9;
}

/* Paragraph inside details */
details p {
  margin: 10px 0 0;
}

Explanation of the CSS

1. details: This adds a border and padding around each accordion section, creating a card-like effect. The border-radius makes the corners rounded for a modern look.

2. summary: This gives the accordion title a bold font and a pointer cursor, signaling to the user that it is clickable. We’ve also removed the default list-style to prevent the browser from adding a disclosure triangle, but you could leave it in if you like that effect.

3. Hover effect on summary: Adding a subtle hover effect on the summary makes it more interactive. In this case, we change the text color to a blue shade on hover.

4. details[open]: This selector targets <details> elements that are in the open state. When the accordion is expanded, it applies a light background color to differentiate between closed and open states.

5. Paragraph styling: We ensure that the content inside the accordion (in this case, a paragraph) has some space at the top by adding margin to create a clean separation between the title and content.

Adding Icons for Enhanced UX

To make the accordion more user-friendly, you can add icons (like arrows) that change direction depending on whether the accordion is expanded or collapsed. This can be achieved with CSS as well, without the need for JavaScript.

Here’s how to add a rotating arrow next to the accordion title:

/* Add arrow before summary */
summary::before {
  content: "\25B6"; /* Right-pointing arrow */
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.3s ease;
}

/* Rotate arrow when details is open */
details[open] summary::before {
  transform: rotate(90deg);
}

Explanation of the CSS

1. summary::before: This CSS rule inserts a right-pointing arrow (\25B6) before the text inside the <summary>. The display: inline-block ensures that the arrow is treated as an inline element with block-level properties, allowing us to apply a transform.

2. Rotate on open: When the accordion is opened (i.e., the <details> element has the open attribute), the arrow rotates 90 degrees, pointing downward, giving users a visual cue that the accordion is expanded.

Cross-Browser Considerations

One of the most appealing aspects of using <details> and <summary> is that these elements are well-supported in modern browsers, including Chrome, Firefox, and Safari. However, Internet Explorer does not support them. If you need to support legacy browsers like IE11, you can use a polyfill to ensure graceful degradation.

Conclusion

By using the native HTML5 <details> and <summary> elements, you can create clean, simple, and highly performant accordions that require no JavaScript at all. This approach not only streamlines your code but also improves accessibility and performance, making it a fantastic solution for modern web development.

For more in-depth examples, or to see a live demo, check out the CodePen example. Whether you’re creating a FAQ section, documentation, or just need to organize content in a compact way, CSS-based accordions are an excellent choice for any developer looking to simplify their workflow while maintaining functionality and performance.