DEV Community

Cover image for Collapsable content in Markdown with <details>
JS Bits with Bill
JS Bits with Bill

Posted on

Collapsable content in Markdown with <details>

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

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!

Discussion (0)