Six years ago, I explored the native <details> and <summary> elements to create accessible accordions. Since then, the web platform has evolved, introducing exciting new features like exclusive open behaviour and smooth animations for these elements.

Native HTML: Accordion

Andrew Bone ・ Jan 4 '19

#html #css #a11y #design

In this article, we'll revisit <details> and make the most of modern CSS properties to add polish to your accordions. I'll also share a demo implementation showcasing these features.

The Basics: <details> and <summary>

The <details> element provides a native way to create toggleable sections in HTML, with the <summary> element acting as the clickable label. This makes it easy to create disclosure widgets with minimal effort.

Here’s a simple example:

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

Clicking the summary toggles the visibility of the associated content. No JavaScript required!

Enhancements: Exclusive Open Behaviour

To mimic traditional accordion behaviour, where only one section is open at a time, you can use the name attribute on your <details> elements. When <details> elements share the same name, opening one automatically closes the others in the group.

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

This behaviour is native and works seamlessly in modern browsers!

Adding Smooth Animations with CSS

To make the opening and closing transitions smoother, we can use modern CSS properties like interpolate-size and transition-behavior.

Key Properties

• interpolate-size: Allows animating between intrinsic sizes (like auto) and fixed sizes. This property is currently only supported in Chrome.
• transition-behavior: When set to allow-discrete, properties that normally can't be animated like visibility and display wait rather than instantly updating.

Example Styling

Here’s a complete example of the CSS used in the demo:

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

How It Works

1. Height Animation: The interpolate-size property allows smooth transitions between height: 0 (closed) and height: auto (open). However, this is currently supported only in Chrome.
2. Visibility Transition: The transition-behavior property ensures the visibility change appears seamless.

The Demo: Bringing It All Together

Here’s the full implementation:

Browser Support

• interpolate-size: Currently only supported in Chrome.
• transition-behavior: Supported in most modern browsers.

For browsers without support, the animations gracefully fall back, and the accordion remains functional without the smooth transitions.

Conclusion

The <details> and <summary> elements, combined with modern CSS, provide a lightweight and accessible solution for creating interactive accordions. These new enhancements make them even more appealing for modern web projects. Try out the demo and give your accordions a fresh, polished look!

Thanks so much for reading. If you'd like to connect with me outside of Dev here are my twitter, bsky and linkedin come say hi 😊