Bootstrap Tabs not Working

[leflambeur]

Hi,

I'll preface this by saying I'm not a Frontend Dev so could be missing something, I've just been going over this for a couple of days now so thought it best to ask

I'm using your theme which I'm really enjoying to rebuild our docs website in my personal space before pushing it to our org and so far so good,

Something we're really keen to implement are tabbed codeblocks so you can get examples in different languages e.g. Python, JS, Go etc

However no matter what I try to implement either pure bootstrap tabs or other people's shortcode for tabs it just doesn't work

Specifically what happens is that the first tab and it's content render but then when you go to click the second tab all that happens is a new #tab-1 reference gets added to the url and then nothing else changes; the first tab stays highlighted, the content is also representative of the first tab

I've tried a few things:

bootStrap = true in config.toml

Switching the js import of bootstrap/dist/js/bootstrap.min.js to bootstrap/dist/js/bootstrap.bundle.js (and bootstrap/dist/js/bootstrap.js) in case there was something missing there

I've tried using the following short codes:

• (see tab and tabs in )
• 
• 

I've also tried to implement pure html direct to the document with the same results which leads me to believe it's not the shortcode/html or hugo as a base but something in how the html either is being rendered or treat by doks specifically (otherwise there wouldn't be so many people with example shortcodes or having it work)

My intuition is telling me it's to do with how when I click on a tab it treats it like I'm linking to a heading in the document and amending the url as a result but I am just guessing

Could well be there's some magic JS I'm missing to make this all work

Any insight or ideas on how to implement this would be greatly appreciated

[leflambeur]

I was right it was the links, but it wasn't Doks fault at all - the K8s shortcode uses for its data toggle where the Bootstrap docs recommend buttons

I changed the references to buttons instead and it works now

Posting the changes here for context:

Before:

<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
	{{- range $i, $e := $tabs -}}
	  {{- $id := printf "%s-%d" $tab_set_id $i -}}
	  {{- if (eq $i 0) -}}
		<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
	  {{ else }}
		<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
	  {{- end -}}
{{- end -}}
</ul>

After:

<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
        {{- range $i, $e := $tabs -}}
          {{- $id := printf "%s-%d" $tab_set_id $i -}}
          {{- if (eq $i 0) -}}
                <li class="nav-item">
                        <button data-bs-toggle="tab" class="nav-link active" href="#{{ $id }}" type="button" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</button>
                </li>
          {{ else }}
                <li class="nav-item">
                        <button data-bs-toggle="tab" class="nav-link" href="#{{ $id }}" type="button" role="tab" aria-controls="{{ $id }}" aria-selected="false">{{- trim .name " " -}}</button>
                </li>
          {{- end -}}
{{- end -}}
</ul>

---

@h-enk could you add the attached shortcodes and usage docs to the project? I'm sure this will go a long way to helping people wishing to do similar and use this site for documentation!

They're a little rough so might need some refinement but hopefully this helps anyone else looking for this :)

Shortcodes to be put in ./layouts/shortcodes

(Github won't let me upload html files)

tab.html.txt
tabs.html.txt

Example of usage (from the K8s site)
Example of Shortcode

[h-enk]

Interesting! Will take a closer look later.

Examples

• https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/#install-on-windows-using-chocolatey-or-scoop
• https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

[cameronelliott]

This is really cool, and I'm going to try this and explore it, I also need tabs for the same reasons!

[cameronelliott]

@leflambeur Just curious is the source for the site you are working on public on Github, then I could reference it will learning how to do this, and try it out. Thanks.

[cameronelliott]

@leflambeur I've managed to get the tabs and the tab content rendering, but for whatever reason,
clicking on tab2 from you example doesn't seem to do anything, nor does anything happen in the console.

Any ideas?
Thanks in advance

[cameronelliott]

Thanks for all the links and ideas. I'm still struggling with getting basic tab clicking working.
I suspect I am not getting bootstrap in the page, or maybe the JS for tabs is not part of the bootstrap build Doks is using.
Are you aware of anything you did to change the bootstrap build or get the build loading in all/more pages?
😄

[leflambeur]

Not afaik, it was a while ago, there may also be some CSS I changed in assets/scss; I remember I also struggled with it for a while

The only other thing I can think of is that I changed the underlying bootstrap package, i think in an effort to get more functionality when I saw the same issue you had:

https://github.com/jitsuin-inc/rkvst-docs/blame/main/assets/js/bootstrap.js

Also I have custom styling in the CSS (i think _variables, _dark and components/_code are where you want to look

[leflambeur]

I think the answer is likely the bootstrap package change I made, but I wouldn't sleep on the custom styling either

[leflambeur]

If it helps it is basically taken from here with some minor adjustments:

https://github.com/kubernetes/website/tree/main/layouts/shortcodes

This may be a good place to cross reference as well :)

[leflambeur]

Also the hubspot bubble was just auto-done after I added the hubspot tracking code given to me by the sales guys in the script footer in layouts; can't claim that one myself 😅

[cameronelliott]

The solution for me to get tabs working:
Drop in the two shortcodes, as described above. (I went to @leflambeur's repo as he made some changes)

Here is the killer part I struggled with.

Go open config/_default/params.toml and change bootStrapJs from false to true.

Thanks to @leflambeur for all the help.