Uploaded June 2024 | Updated September 2026, 1 hour ago
Find out how to fully animate the HTML Details/Summary disclosure widget using only CSS, including the Summary marker arrow rotate, and height transition to open/close the element content.
You’ll learn how to inspect the Shadow DOM of native HTML elements, how the calc-size() function works, why you need transition-behavior property to animate content-visibility, how to connect multiple HTML Details elements, and more.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/jOorzPv?layout=left
Transition to "height: auto;" Using Pure CSS: youtu.be/1VsMKz4Zweg
DevTools Tips: youtu.be/W7GQglXn-jQ
Logical CSS Properties: youtu.be/cV9JhEV4Ll0
Individual CSS Transform Properties: youtu.be/ZAXSbjrOZwg
Experimental Web Platform Features: youtu.be/3IH3P-KCvmA
marker on MDN developer.mozilla.org/en-US/docs/Web/CSS/marker
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Help support my channel
👨🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly
📖 Chapters
00:00 About HTML Details & Summary element
01:26 Style HTML Details disclosure element using CSS
02:40 Inspect HTML Details Shadow DOM in DevTools
03:55 Utilize HTML Details pseudo-elements
05:10 Animate HTML Details open/close using calc-size()
07:00 Use transition-behavior: allow-discrete; to animate content-visibility
08:58 Browser support for calc-size() & transition-behavior: allow-discrete;
10:04 Animate HTML Summary Arrow marker
15:01 Connect multiple Details elements
15:59 Open Details disclosure widget by default
16:25 Browser support for HTML Details “name” attribute
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #htmldetails
Find out how to fully animate the HTML Details/Summary disclosure widget using only CSS, including the Summary marker arrow rotate, and height transition to open/close the element content.
You’ll learn how to inspect the Shadow DOM of native HTML elements, how the calc-size() function works, why you need transition-behavior property to animate content-visibility, how to connect multiple HTML Details elements, and more.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/jOorzPv?layout=left
Transition to "height: auto;" Using Pure CSS: youtu.be/1VsMKz4Zweg
DevTools Tips: youtu.be/W7GQglXn-jQ
Logical CSS Properties: youtu.be/cV9JhEV4Ll0
Individual CSS Transform Properties: youtu.be/ZAXSbjrOZwg
Experimental Web Platform Features: youtu.be/3IH3P-KCvmA
marker on MDN developer.mozilla.org/en-US/docs/Web/CSS/marker
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Help support my channel
👨🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly
📖 Chapters
00:00 About HTML Details & Summary element
01:26 Style HTML Details disclosure element using CSS
02:40 Inspect HTML Details Shadow DOM in DevTools
03:55 Utilize HTML Details pseudo-elements
05:10 Animate HTML Details open/close using calc-size()
07:00 Use transition-behavior: allow-discrete; to animate content-visibility
08:58 Browser support for calc-size() & transition-behavior: allow-discrete;
10:04 Animate HTML Summary Arrow marker
15:01 Connect multiple Details elements
15:59 Open Details disclosure widget by default
16:25 Browser support for HTML Details “name” attribute
Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
👨💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #htmldetails
