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.