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!