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!

Sentry blog image

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.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

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

Okay