Bootstrap Tabs as Hugo Shortcodes


#1

I am trying to create a shortcode for bootstrap tabs. I have following HTML structure,

<nav class="nav nav-tabs" id="myTab" role="tablist">
  <a class="nav-item nav-link" id="{{ .Get `id` }}-tab" data-toggle="tab" href="#{{ .Get `id` }}" role="tab" aria-controls="{{ .Get `id` }}">
      {{ .Get "title" }}
  </a>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab">
    {{ .Inner }}
  </div>
</div>

The structure also contains the Hugo placeholder. But the inner part of the code, which is,

  <a class="nav-item nav-link" id="{{ .Get `id` }}-tab" data-toggle="tab" href="#{{ .Get `id` }}" role="tab" aria-controls="{{ .Get `id` }}">
      {{ .Get "title" }}
  </a>

is required multiple times along with the corresponding content div which is,

  <div class="tab-pane fade" id="{{ .Get `id` }}" role="tabpanel" aria-labelledby="{{ .Get `id` }}-tab">
    {{ .Inner }}
  </div>

Now the problem is that I have to pass the id as an argument of inner structure and should be detached from its parent. I should be able to use shortcode in following way:

{% tabs %}
    {% tab id = "tab-1" title = "Tab One" %}
        Content in Tab 1
    {% \tab %}
    {% tab id = "tab-2" title = "Tab Two" %}
        Content in Tab 2
    {% \tab %}
{% \tabs %}

How can I achieve this?


#2

I’m trying really hard to achieve this… I got as far as passing variables, now I’m stuck on identifying the first content pane to make it active. Anyway, here’s how you invoke the shortcode:

{{% tabs %}}
    {{% tab "Overview" %}}

    Here's some content

    {{% /tab %}}
    {{% tab "Profile" %}}

    Content of the profile tab

    {{% /tab %}}
    {{% tab "Whatever" %}}

    Whatever goes here

    {{% /tab %}}
{{% /tabs %}}

Long story short, you can use .Page.Scratch from the child shortcode and pull those values from the parent, like so:

Child

{{ $tabName := (.Get 0) }}
{{ .Page.Scratch.Add "tabList" (slice $tabName) }}

This is taking the param from your shortcode, and saving it into an array called “tabList” which can be invoked from the parent using .Page.Scratch.Get "tabList".

You can then iterate through this array using range.