Linking to tabbed headings broken

[mitchnemirov]

Background

I use jekyll with jekyll-tabs for writing documentation for my organization, all deployed through GitHub Pages. Tabs allow me to reduce the visual 'size' of each page and gives a top-level 'category' for the articles to reside in.

Issue

Unfortunately, deep-linking to headings within tabs (or even the tabs themselves) is broken. At generation, tabs all are given the href of '#', so links to anything on the page will simply open the first tab.

Direct linking to each article is a much desired feature to enable sharing links to users that automatically open the relevant tab/article.

Possible Solutions?

At generation each tab should be given an href of '#name_of_tab', so linking to subsequent headings includes the correct url parameters for navigating to that particular tab.

[Ovski4]

Hello :wave:

This is an interesting use case. The solution you described wouldn't work with only HTML, since the tabs are shown / hidden using javascript.

To support this we can make the following changes:

• Add an id attribute on the tabs. href is for links, but id can be used for anchors which is what I think you are looking for here.
• Update the javascript to open a tab if a query parameter is present in the url (like active_tab=tabref)

I pushed a gem that you can test. You can install version 1.2.2-dev (set gem 'jekyll-tabs', '~> 1.2.2-dev' in your Gemfile) and update the tabs.js file with this content (or you can see the diff here and update your file directly)

Here is an example to show you how it works. Let's assume you have a structure like this one:

{% tabs my_tabs %}

{% tab my_tabs tab label 1 %}
.....
{% endtab %}

{% tab my_tabs tab label 2 %}
......
{% endtab %}

{% endtabs %}

You can link your page like this: http://your-jekyll-website.com/some-page/?active_tab=tab-label-2#my_tabs. Opening this url would scroll to the #my_tabs tabs, and open tab with label tab label 2

We need to sanitize the tab label to fit as a url query parameter. Some examples to show how we replace special characters with a dash:

• {% tab my_tabs tab label 1 %} -> ?active_tab=tab-label-1
• {% tab my_tabs tab #3 %} -> ?active_tab=tab--3
• {% tab my_tabs tab v1.3 %} -> ?active_tab=tab-v1-3
• {% tab my_tabs tab? %} -> ?active_tab=tab

Opening the web dev tools and investigating the HTML to search for the <li> tag id will help to get the right value for the query param.

Let me know if that would work for your use case.

Edit: if you want a real world example, I just updated the gem on my old blog. Open this link and you'll notice the second tab gets opened

[mitchnemirov]

Hello @Ovski4 :wave:

That solution works great for my docs site, but I noticed that the '?active_tab=tab-label' url param sticks around even when clicking or copying links to headings on the page.

Tangentially, it would be nice for the URL to automatically update based on which tab I have currently open, so as to make copying the URL easier. Is this a possibility, or is this more of a top-level Jekyll issue/request?

[Ovski4]

That's a reasonable request for this new feature :+1:

I wouldn't want this behaviour to be the default one. I think someone using this plugin could be surprised to see the URL being updated when tabs are being clicked on.

But we can make this behaviour configurable, this is what we do for some other behaviours (see this section).

I'll work on this and let you know

[Ovski4]

Can you update the script using this content and tell me if that works for you? You'll have to set activateTabFromUrl to true in the jekyllTabsConfiguration object (line 6 of the script)

It should work with the gem in version 1.2.2-dev.

[mitchnemirov]

It works great! Thank you so much for the speedy work on this.

I'm happy to consider this issue closed, unless you prefer to keep it open until the changes are merged into master.

[Ovski4]

Thank you! This is fixed in #10.

I yanked the dev gem and pushed version 1.2.0, so I'm not 100% sure but you might need to remove and add the plugin again.

bundle remove jekyll-tabs
# Add back "gem 'jekyll-tabs'" to Gemfile
bundle update jekyll-tabs