This content originally appeared on DEV Community and was authored by Andrew Bone
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.
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 (likeauto) and fixed sizes. This property is currently only supported in Chrome. -
transition-behavior: When set toallow-discrete, properties that normally can't be animated likevisibilityanddisplaywait 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
-
Height Animation: The
interpolate-sizeproperty allows smooth transitions betweenheight: 0(closed) andheight: auto(open). However, this is currently supported only in Chrome. -
Visibility Transition: The
transition-behaviorproperty 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 😊
This content originally appeared on DEV Community and was authored by Andrew Bone
Andrew Bone | Sciencx (2025-01-06T20:46:10+00:00) Native HTML: Accordion Revisited. Retrieved from https://www.scien.cx/2025/01/06/native-html-accordion-revisited/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.