Animate "details" tag with pure CSS

Hello!

I saw a post with the title "HTML can do that?" and here the dev user added the <details> tag. Here is a small description from W3 Schools:

"The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the tag.
The content of a <details> element should not be visible unless the open attribute is set."

The problem here is that by itself the <details> tag isn't user friendly, I suggest adding a really small animation to it so the user knows exactly what content appears after clicking the detail summary.

Details tag with no animation:

To add an animation to it we first need to create the CSS keyframes. In our animation you can play with a lot of css rules, but to keep it simple we are only going to use opacity and a margin-left.

@keyframes open {
  0% {opacity: 0; margin-left: -20px}
  100% {opacity: 1; margin-left: 0px}
}

Once the animation is ready, let's assign this to our <details> tag with the [open] selector, just like this:

details[open] summary ~ * {
  animation: open .5s ease-in-out;
}

Here you can see the result:

This is a super simple animation you can add to your projects and the result is pretty nice!

Comments

[Gustavo Alexandrino]

I have a solution that smoothly animates both the opening and closing of the <details> element with pure CSS, no JavaScript, and I wrote a detailed post about it.

See it live on CodePen: codepen.io/jgustavoas/pen/zYLNKbN

[物灵]

Is it possible to animate <detail> when it is closing?

[Dan Leatherman]

This animation only runs on first click. Any idea how to make it run every time it's opened?

[Koas]

Hi Dan, I couldn't find why this happens, but I made an easy workaround although a little JS is required. Just add this at the end of the page:

/*
When a details element is closed this function will create a new details 
element with the same content and replace it.
*/
function detailsToggled(e)
{
  if (e.srcElement.open)
    return;

  const copy = document.createElement("details");
  copy.innerHTML = e.srcElement.innerHTML;
  copy.addEventListener('toggle', detailsToggled);

  e.srcElement.parentNode.replaceChild(copy, e.srcElement);
}
// Add the event listener to all details elements on the page
document.querySelectorAll('details').forEach(d =>
{
  d.addEventListener('toggle', detailsToggled);
});

You can see it in action here

[Lars Klopstra ⚡]

Is there a reason why you picked margin over transform?

[Arturo Cabrera]

Hello!

Yes, I really wanted to keep this little animation very simple, margin is the first rules you learn in CSS, but yeah... a translate should be much better :)