Display Clickable Sections inside Nested Sections

support
1

Hello I am new to Hugo and using Hugo developing a site. Following is the content structure I am using.

content
|_____exercises
      |___exercise_type_1
                 |_topic-1_1.md
                 |_topic-1_2.md
                 |-_index.md
      |___exercise_type_2
	          |_topic-2_1.md
	          |_topic-2-2.md
                  |-_index.md

My requirement is to display the nested section on every section page. If user click on any nested section it will display all topics. To achieve this I find the following code but it’s showing all content inside Top section and subsections. However, I need to only Subsections inside a section not all content.

Again Top section will show nested sections and clicking on nested section will display if any subsections inside it or content if no subsections inside it.

I am using following code inside list.html under layouts->_default

{{- if .Sections -}}
{{- range .Sections -}}					
	{{- range $i, $e := .Data.Pages -}}
		
		<h2>{{  .Title }}</h2>	
		<p><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
	{{- end -}}
{{- end -}}				
{{- end -}}

{{- range $i, $e := .Data.Pages -}}
									
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>	

{{- end -}}

Please guide me if you can I am stuck here and need to fix ASAP.

Thank you

2

You can use Parent to list your in-section pages and subsections.
Then a recursive call like: Snippet - partial for creating breadcrumbs (uses Bootstrap 4)