Delete conflicting tabs shortcode

assets/js/tabs.js

-var $ = window.$;
-
-$('.tab-content').find('.tab-pane').each(function (idx, item) {
-  var navTabs = $(this).closest('.code-tabs').find('.nav-tabs');
-  var title = $(this).attr('title');
-  navTabs.append('<li class="nav-tab"><a href="#" class="nav-tab">' + title + '</a></li>');
-});
-
-$('.code-tabs ul.nav-tabs').each(function () {
-  $(this).find('li:first').addClass('active');
-});
-
-$('.code-tabs .tab-content').each(function () {
-  $(this).find('div:first').addClass('active');
-});
-
-$('.nav-tabs a').click(function (e) {
-  e.preventDefault();
-  var tab = $(this).parent();
-  var tabIndex = tab.index();
-  var tabPanel = $(this).closest('.code-tabs');
-  var tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
-  tabPanel.find('.active').removeClass('active');
-  tab.addClass('active');
-  tabPane.addClass('active');
-});

layouts/partials/head-css.html

-
-{{ $scssMain := "scss/main.scss" }}
-{{ if .Site.IsServer }}
-{{/* Note the missing postCSS. This makes it snappier to develop in Chrome, but makes it look sub-optimal in other browsers. */}}
-{{ $cssMain := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) }}
-<link href="{{ $cssMain.RelPermalink }}" rel="stylesheet">
-{{ else }}
-{{ $cssMain := resources.Get $scssMain | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
-<link rel="preload" href="{{ $cssMain.RelPermalink }}" as="style">
-<link href="{{ $cssMain.RelPermalink }}" rel="stylesheet" integrity="{{ $cssMain.Data.integrity }}">
-{{ end }}
-<link href="/stylesheets/tabs.css" rel="stylesheet">

layouts/shortcodes/tab.html

-<div class="tab-pane" title="{{ .Get 0 }}">
-    {{ .Inner }}
-</div>
\ No newline at end of file
+<!-- Prefill header if not given as parameter -->
+{{ if and (not .IsNamedParams) (.Get 0) }}
+  {{ .Scratch.Set "header" (.Get 0) }}
+{{ else }}
+  {{ .Scratch.Set "header" (default (printf "Tab %v" ( add $.Ordinal 1)) (.Get "header")) }}
+{{ end }}
+{{ $header := (.Scratch.Get "header")  }}
+
+<!-- store all tab info in dict tab -->
+{{ $tab := dict "header" $header }}
+{{ with $.Get "lang" }}
+  {{ $tab = merge $tab (dict "language" ($.Get "lang")) }}
+{{ end }}
+{{ with $.Get "highlight" }}
+  {{ $tab = merge $tab (dict "highlight" ($.Get "highlight")) }}
+{{ end }}
+{{ with $.Get "code" }}
+  {{ $tab = merge $tab (dict "code" ($.Get "code")) }}
+{{ end }}
+{{ with $.Get "disabled" }}
+  {{ $tab = merge $tab (dict "disabled" ($.Get "disabled")) }}
+{{ end }}
+{{ with $.Inner }}
+  <!-- Trim any leading and trailing newlines from .Inner, this avoids
+       spurious lines during syntax highlighting -->
+  {{ $tab = merge $tab (dict "content" $.Inner ) }}
+{{ end }}
+
+<!-- add dict tab to parent's scratchpad -->
+{{ with .Parent }}
+  {{- $.Parent.Scratch.SetInMap "tabs" (printf "%v" $.Ordinal) $tab -}}
+{{ end }}

layouts/shortcodes/tabs.html

-<div class='code-tabs'>
-    <ul class="nav nav-tabs"></ul>
-    <div class="tab-content">{{ .Inner }}</div>
+{{ $_hugo_config := `{ "version": 1  }`  }}
+
+<!-- Check parameter types -->
+{{ with .Get "langEqualsHeader"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'langEqualsHeader' must be either true or false" -}}
+{{ end }}
+{{ end }}
+
+{{ with .Get "code"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'code' must be either true or false" -}}
+{{ end }}
+{{ end }}
+
+{{ with .Get "persistLang"  }}
+{{ if ne ( printf "%T" . ) "bool" }}
+{{- errorf "shortcode tabpane: parameter 'persistLang' must be either true or false" -}}
+{{ end }}
+{{ end }}
+
+<!-- Set values given defined within tabpane -->
+{{- $langPane := default "" ($.Get "lang") -}}
+{{- $hloptionsPane := default "" ($.Get "highlight") -}}
+{{- $codePane := default false ($.Get "code") -}}
+{{- $langEqualsHeader := default false ($.Get "langEqualsHeader") -}}
+{{- $persistLang := default true ($.Get "persistLang") -}}
+{{- $disabled := false -}}
+{{- $activeSet := false -}}
+
+<!-- Scratchpad gets populated through call to .Inner -->
+{{- .Inner -}}
+
+<ul class="nav nav-tabs" id="tabs-{{- $.Ordinal -}}" role="tablist">
+  {{- range $index, $element := $.Scratch.Get "tabs" -}}
+
+    {{- $lang := $langPane -}}
+    {{- if $langEqualsHeader -}}
+      {{- $lang = $element.header -}}
+    {{end}}
+    {{- with $element.language -}}
+      {{- $lang = $element.language -}}
+    {{- end -}}
+
+    {{- $disabled := false -}}
+    {{- with $element.disabled -}}
+      {{ if ne ( printf "%T" . ) "bool" }}
+        {{- errorf "shortcode tab: parameter 'disabled' must be either true or false" -}}
+      {{ end }}
+      {{- $disabled = . }}
+    {{- end -}}
+
+    <!-- Replace space and +, not valid for css selectors -->
+    {{- $lang := replaceRE "[\\s+]" "-" $lang -}}
+
+    <li class="nav-item">
+      <!-- Generate the IDs for the <a> and the <div> elements -->
+      {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
+      {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
+
+      <a class="nav-link{{ if and ( not $activeSet ) ( not $disabled ) }} active{{ end }}{{ if eq $disabled true }} disabled{{ end }}{{ if ne $lang "" }}{{ if $persistLang }} persistLang-{{- $lang -}}{{ end }}{{ end }}" 
+          id="{{- $tabid -}}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
+          {{ if ne $lang "" }}{{- if $persistLang -}}onclick="persistLang({{- $lang -}});"{{end}}{{end}}
+        aria-controls="{{- $entryid -}}" aria-selected="{{- and ( not $activeSet ) ( not $disabled ) "true" "false" -}}">
+        {{- index . "header" | markdownify -}}
+      </a>
+    </li>
+
+    {{ if not $disabled }}
+      {{ $activeSet = true }}
+    {{ end }}
+
+  {{- end -}}
+</ul>
+
+{{ $activeSet = false }}
+
+<!-- Inner content -->
+<div class="tab-content" id="tabs-{{- $.Ordinal -}}-content">
+  {{- range $index, $element := $.Scratch.Get "tabs" -}}
+
+    {{- $lang := $langPane -}}
+    {{- if $langEqualsHeader -}}
+      {{- $lang = $element.header -}}
+    {{end}}
+    {{- with $element.language -}}
+      {{- $lang = $element.language -}}
+    {{- end -}}
+
+    {{- $disabled := false -}}
+    {{- with $element.disabled -}}
+      {{- $disabled = . }}
+    {{- end -}}
+
+    {{- $hloptions := $hloptionsPane -}}
+    {{- with $element.highlight -}}
+      {{- $hloptions = $element.highlight -}}
+    {{- end -}}
+
+    {{- $code := $codePane -}}
+    {{- with $element.code -}}
+      {{ if ne ( printf "%T" . ) "bool" }}
+        {{- errorf "shortcode tab: parameter 'code' must be either true or false" -}}
+      {{ end }}
+      {{- $code = . }}
+    {{- end -}}
+
+    {{- $tabid := printf "tabs-%v-%v-tab" $.Ordinal $index | anchorize -}}
+    {{- $entryid := printf "tabs-%v-%v" $.Ordinal $index | anchorize -}}
+
+    <div class="{{ if not $code }}tab-body {{end}}tab-pane fade{{ if and ( not $activeSet ) ( not $disabled ) }} show active{{ end }}"
+        id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
+        {{ if $code }}
+          {{- highlight (trim (index . "content") "\n") $lang $hloptions -}}
+        {{- else -}}
+            {{- index . "content" -}}
+        {{- end -}}
+    </div>
+
+    {{ if not $disabled }}
+      {{ $activeSet = true }}
+    {{ end }}
+
+  {{ end }}
 </div>
-<div><br></div>
\ No newline at end of file

static/stylesheets/tabs.css

-ul.nav.nav-tabs {
-    padding: 0;
-    list-style-type: none;
-    overflow: hidden;
-    content: none;
-    border-bottom-color: lightgray;
-    border-bottom-width: 0.5px;
-    border-bottom-style: solid;
-}
-
-li.nav-tab {
-    padding: 10px 20px;
-    float: left;
-    text-align: center;
-    text-decoration: none;
-    text-transform: uppercase;
-    font-weight: bold;
-    color: darkgray;
-    font-size: 14px;
-}
-
-li.active {
-    color: rgb(87, 119, 249);
-    background: #f5f5f5;
-}
-
-a.nav-tab {
-    all: unset;
-    cursor: pointer;
-}
-
-div.tab-pane {
-    display: none;
-}
-
-div.tab-pane.active {
-    display: block;
-    padding-left: 20px;
-    padding-bottom: 20px;
-    padding-top: 10px;
-    background: #f5f5f5;
-}
-
-code {
-    word-break: keep-all;
-}
-
-.hero-logo {
-    margin-bottom: -2rem;
-    width: 60%;
-}
-
-footer.auto-height {
-    min-height: auto;
-}