DEV Community

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

Posted on

4

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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay