JS Bits with Bill
JS Bits with Bill


JS Bits with Bill

Collapsable content in Markdown with <details>

Collapsable content in Markdown with <details>

JS Bits with Bill's photo
JS Bits with Bill
·Oct 11, 2021·

1 min read

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

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

  - [🇩🇪 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)

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!

Share this