在HUGO Site Generator的列表页面上创建可折叠/嵌套菜单

问：

我正在尝试创建一个带有可折叠菜单的列表页面，由主要部分、子部分和上一部分的所有内容页面分隔。所有内容都应该可以在同一页面上折叠，而无需加载新页面。

目前我在我的列表.html文件中使用此代码：

{{ 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 }}

此代码的问题在于，只有最后一部分是可折叠的。 如果我单击它，下面的每个内容页面都会显示出来。

当我单击它们时，我怎样才能使只有相应的小节折叠出来？例如，像这样（简化）：

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
....

如果你有更好或更简单的代码，我当然也会使用它。

我尝试了上面的代码。