Separate Details/Summary for each parent key?

[dixonge]

I remain unsure whether this should be handled by an array or 'for' iteration or what. In the meantime, I have this partially working by simply copying the 'docs-toc.njk' contents (from the 11ty website) into the top of my template and then duplicating it, filtering each section. This is fine for my test site, but I have a real-world site with many more parent/child components and I don't want all that clutter in a template.

So - what's the best way to have all children nav items show up underneath a parent toggle? (see screenshot)

[dixonge]

some code for example purposes - this is how I am currently doing it. As you can see, if I had say 7-8 different sections or categories, this would get very bloated...

<details>
	<summary class="btn-primary benchnine rainbow-active rainbow-active-noanim">Notes</summary>
	{%- if eleventyNavigation -%}
		{%- set navKey = eleventyNavigation.key -%}
	{%- endif -%}
	{{ collections.all | eleventyNavigation("Notes") | eleventyNavigationToHtml({ activeKey: navKey, listClass: 'elv-toc-list', activeListItemClass: 'elv-toc-active' }) | safe }}
</details>
<details>
	<summary class="btn-primary benchnine rainbow-active rainbow-active-noanim">Homes</summary>
	{%- if eleventyNavigation -%}
		{%- set navKey = eleventyNavigation.key -%}
	{%- endif -%}
	{{ collections.all | eleventyNavigation("Homes") | eleventyNavigationToHtml({ activeKey: navKey, listClass: 'elv-toc-list', activeListItemClass: 'elv-toc-active' }) | safe }}
</details>

[dixonge]

this plugin seems to be abandoned, for all intents and purposes. Guess I'll explore alternatives.