Place example code file in collapsible sections

Is your feature request related to a problem? Please describe.

Some examples in the Score example hub contain several example files which are shown inline one after another. Due to some of them being rather extensive, this makes it somewhat difficult to navigate the page and see what's available on it.

E.g. here:

• Multiple Score files: https://docs.score.dev/examples/score/resources/community-provisioners/service/
• Multiple code examples: https://docs.score.dev/examples/score/resources/community-provisioners/dns/

Describe the solution you'd like

Enhance the page rendering so that any time more than one example code file is being shown back to back, all of them are placed in a collapsible section for each file. The section has the name of the file as its title.

By default, i.e. when the page is opened, all sections are collapsed.

Additional context

This Hugo shortcode may serve as a starting point:

<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
  {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
</details>

When placed in layouts/shortcodes/details.html, it can then be used on a page like this:

{{% details "the section title goes here" %}}
... some content
{{% /details %}}

Inspect the example pages for service and DNS, then trace how multiple example code files are rendered. The issue suggests starting with layouts/shortcodes/details.html and the provided details shortcode. Done means each back-to-back file appears in its own collapsed section titled with the filename, with all sections collapsed by default.