The details element is amazing

Have you seen those fancy cards that pop open when ya click em and reveal more info? I think I saw em on Apple dot com not so long ago although now I can’t find a good example. Well, this morning I realized we don’t need a ton of JavaScript and CSS fanciness to get those big beautiful cards and here’s the proof: the ever-so-powerful and perfect <details> element can be used to make this effect.

Here, click this lil card to expand it:

See the Pen Details Card by Robin Rendle (@robinrendle) on CodePen.

It’s not responsive or polished yet but isn’t this super neat? All of this is running off the magic of a few humble HTML tags:

<details>
  <summary>
    <!-- title -->
  </summary>
  <!-- paragaphs -->
</details>

I’ll figure out why the animations aren’t working each time but besides that, I love this pattern and had no idea you could use <details> in this way.