hugo-theme-relearn/layouts/partials/shortcodes/tabs.html

{{- $context := .context }}
{{- $tabs := .content | default slice }}
{{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
{{- with $context }}
<div class="tab-panel" data-tab-group="{{ $groupid }}">
  <div class="tab-nav">
  {{- range $idx, $tab := $tabs }}
    <button
      data-tab-item="{{ .name }}"
      class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
      onclick="switchTab('{{ $groupid }}','{{ .name }}')"
    >
      <span>{{ .name }}</span></button>
  {{- end }}
  </div>
  <div class="tab-content">
    {{- range $idx, $tab := $tabs }}
    <div
      data-tab-item="{{ .name }}"
      class="tab-content-text{{ cond (eq $idx 0) " active" ""}}"
    >
{{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
    {{- end }}
  </div>
</div>
{{- end }}