DEV Community

Arturo Cabrera
Arturo Cabrera

Posted on

Animate "details" tag with pure CSS

#html #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}
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Here you can see the result:

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

Top comments (6)

Collapse
 
jgustavoas profile image
Gustavo Alexandrino • • Edited

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

Collapse
 
dleatherman profile image
Dan Leatherman •

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

Collapse
 
koas profile image
Koas • • Edited

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);
});
Enter fullscreen mode Exit fullscreen mode

You can see it in action here

Collapse
 
0xis profile image
物灵 •

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

Collapse
 
larsklopstra profile image
Lars Klopstra ⚡ •

Is there a reason why you picked margin over transform?

Collapse
 
pixmy profile image
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 :)

Read next

alvaromontoro profile image

11 New Features and Functions Arriving in CSS

Alvaro Montoro -

osahenru profile image

Using Canonical URLs for your next Django project

Osahenru -

creativetim_official profile image

10 Tailwind CSS Chatbot Components [Free & Open-Source]

Creative Tim -

labby profile image

Button Shrink Animation Tutorial

Labby -