single.html

{{ define "main" }}
  {{ .Content }}

  {{ $tabs_to_display := slice }}
  {{ $tabs_ids := slice }}
  {{ range $index, $entry := .Params.tabs }}
    {{ $tabs_ids = $tabs_ids | append $entry.ids }}
    {{ $tabs_to_display = $tabs_to_display | append $entry }}
  {{ end }}

  <main class="container">
    <h1>{{ .Title }}</h1>
    <nav class="nav nav-pills nav-fill dp-nav-pills" role="tablist">
      {{ range $index, $navTab := $tabs_ids }}
      <a class="nav-item nav-link{{ if (eq $index 0) }} active{{ else }}{{ end }} ml-2 mb-2 dp-background-color--hero" id="{{ .id }}"
        href='{{print "#" .id "-content"}}' data-bs-toggle="tab" role="tab"
        aria-controls='{{print .id "-content"}}' aria-selected="{{ if (eq $index 0) }}true{{ else }}false{{ end }}">
        <h6 class="m-0">{{ .name }}</h6>
      </a>
      {{ end }}
    </nav>
    <div class="tab-content mt-5">
      {{ $parentScope := . }}
      {{ range $index, $tabPanel := $tabs_to_display }}
        {{ $id := default "" }}
        {{ range .ids }}{{ $id = .id }}{{ end }}
        <div class="tab-pane fade {{ if (eq $index 0) }}active show{{ else }}{{ end }}" id='{{ print $id "-content" }}' role="tabpanel" aria-labelledby='{{print $id "-tab"}}'>
          <article>
            <h2>{{ .title }}</h2>
            {{ range $index, $p := .content }}
              {{ $len := len . }}
              {{ $last := sub $len 1 }}
              {{ if isset . "headers" }}
              <h6>{{ safeHTML .headers }}</h6>
              {{ end }}
              <p>{{ safeHTML .text }}</p>
              {{ if and (ge $len 2) (eq $index $last) }}
              {{ end }}
            {{ end }}
          </article>
          {{ if isset . "data" }}
          <a class="btn btn-primary" href="{{ .data }}" id="download-button-{{ $index }}">{{ i18n "download_csv" }}</a>
          {{ end }}
          {{ if isset . "partial" }}
            {{ partial .partial $parentScope }}
          {{ end }}
        </div>
      {{ end }}
    </div>
  </main>

  <script>
    $(function () {
      $('.nav-pills a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
      });
    });

    $(document).ready(() => {

      // Toggle "Read more" / "Read less" button
      $('[data-toggle="collapse"]').click(function () {
        $(this).toggleClass("active");
        if ($(this).hasClass("active")) {
          $(this).text("Read less");
        } else {
          $(this).text("Read more");
        }
      });
    });
  </script>
{{ end }}