Native HTML: Accordion Revisited

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 😊

Comments

[GP]

I love it! interpolate-size also works in Edge. I like to see more examples with modern CSS and HTML.

[Andrew Bone]

Let me know what you think, are components like this being native HTML and CSS helping you move away from JS? Do you even want to?

[Sakrad CMMI]

Thanks for sharing!

[FlipperZeroUnleashed]

Native HTML solutions for creating an accordion are often overlooked but can be highly effective. Using and tags provides a lightweight, semantic approach without needing JavaScript. For more complex use cases, adding a sprinkle of CSS for animations or styling can make it visually appealing. Sites like FlipperZeroUnleashed often discuss minimalist yet powerful design ideas that could be inspiring for implementing such features.

[Aad Pouw]

With a little bit of js sugar, there is so much more you can do with details/summary!

[Andrew Bone]

What extra functionality would you add with JS? 😊

[Aad Pouw]

Well as you might know, the eventlistener for details/summary is toggle. With that you can pass let say a callback and perform actions on the 'open' attribute. I have a function for that, it takes the details id & two callbacks, one for 'open' and one for 'close'. Aside of that you also have to take some action on the summary element. "summary::marker{ content:''}" if you want to get rid of the standard arrows, then you can use 'before' to handle your own icons. There is a lot more to say about it but that's for another time?

[Taiwo Oyetade]

Thank you so much.
I have been using JavaScript for accordion but seeing this is would love to try this