The <details> Element

Introduced with HTML 5, the <details> element made it possible to create javascript-free accordions. However, they came with a downside, smooth opening and closing animations were not possible. Many would just use JS to allow animations, but that just defeats the purpose.

Thankfully, there is a CSS-only trick to improve the element.

The Trick

The solution is extremely simple — just use a sibling element!

Elements within the <details> tags which are not <summary> tags, display the content of the accordion. This nested element cannot be animated though.

Instead, make the child a sibling of the details element.

Now all you have to do is hide the sibling by default and make it appear once the accordion is open, i.e., details[ open ] + .sibling .