Bootstrap Tabs as Hugo Shortcodes

support
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.

3

I was running into the same issue and was able to solve it. Since this topic comes up first, I wanted to post my solution for others looking for a solution.

1 Like
4

hi, i checked the repo and i’m not quite sure how to connect md files to tabs and tab content. Can you post the link to your repo where you have used this.? It’ll be really helpful for me match with my contents and produce it. And i’m also using nested tabs,

mysite:https://tensketch.netlify.com/
repo: https://github.com/TenSketch/mysite

5

Hello,

You can see an example on the following site.
https://docs.shokoanime.com/server/install_linux/

Here is the repo for that site.

Hopefully this helps, let me know if you need further assistance.

1 Like
6

Thank you!, Will check it

7

Hi I am getting a 404 from GitHub, is it possible to repost?

8

Hello,

Here’s the repos demo.

Hugo Dynamic Tabs (hugo-dynamic-tabs.netlify.app)

1 Like
9

Thanks four taking the time. Much appreciated.