Collapsable content in Markdown with <details>

#markdown #webdev

Pro Tip: The HTML disclosure summary element (<details>) works with markdown so you can create collapsable sections in your READMEs like so:

<!-- README.md -->
<details>
  <summary><b>See 7 Available Translations</b></summary>
  <p>

  - [🇩🇪 Deutsch](./de-DE/README.md)
  - [🇪🇸 Español](./es-ES/README-ES.md)
  - [🇫🇷 Français](./fr-FR/README_fr-FR.md)
  - [🇮🇩 Indonesia](./id-ID/README.md)
  - [🇳🇱 Nederlands](./nl-NL/README.md)
  - [🇧🇷 Português Brasil](./pt-BR/README_pt_BR.md)
  - [🇹🇷 Türkçe](./tr-TR/README-tr_TR.md)
  </p>
</details>

Rendered output:

If your documentation includes huge blocks of code or has many sections, using <details> can be a great way to preserve readability! 📖

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on TikTok, Twitter and I have a new debugging course dropping soon!

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.