Create collapsible / nested menu on List Page in HUGO Site Generator

Question

I am trying to create a List Page with collapsible menus, separated by main sections, subsections and all content pages from the last section. Everything should be collapsable on the same page without loading a new one.

Currently I use this code in my list.html File:

{{ range .CurrentSection.Pages  }}
<details>
  <summary>
  <div class="topline">
    <img class="listimage" src="{{ .Params.Featured_Image }}">
  <h1 class="listheader">{{ .Title }}</h1>  
</div>
{{ end }}
</summary>


{{ range .CurrentSection.Pages }} 
{{ if (eq .CurrentSection .FirstSection) }}
  <div class="topline">
    <img class="listimage" src="{{ .Params.Featured_Image }}">
  <h1 class="listheader"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
</div>

 {{ else }}
 {{ range (where .CurrentSection.Pages "Permalink" "ne" .Permalink) }}
 <div class="topline">
      <img class="listimage" src="{{ .Params.Featured_Image }}">
      <h1 class="listheader"><a href="{{ .RelPermalink }}">{{ .Title  }}</a></h1>
    </div>
      <p class="summary">{{ .Summary }} This text will be hidden if your browser supports it.</p>
      {{ end }}
      <br>
      <br>
    <hr>
    {{ if .Truncated }}
      {{ end }}
  {{ end }}
  {{ end }}
  
</details>

</article>

{{ end }}

The problem with this code is, that only the last section is collapsable. If I click it, every content page below shows up.

How can I make it, that only the respective subsections are folding out, when I click them? E.g. like this (simplified):

Main Section 1
├── Subsection-1
│   └── Content-1
│   └── Content-2
├── Subsection-2
│   └── Content-1
│   └── Content-2

Main Section 2
├── Subsection-1
│   └── Content-1
│   └── Content-2
├── Subsection-2
│   └── Content-1
│   └── Content-2
├── Subsection 3
│   └── Content-1
│   └── Content-2
....

If you have a better or simpler code I would use this too of course.

I tried the code above.