Hide Tab Header, Linked Content Tab Toggle from Nav Bar

[anthonylavado]

Hi there,
I currently have linked content tabs working on my site. A primary use is to choose a unit of measurement when looking at tables with size data. In this case, the two tabs are "Metric" (meters) and "Imperial" (feet and inches). I have a few questions then:

1. Is it possible to only show the tab selector on the first collection, and hide it on subsequent displays? It really only makes sense to have it on the top table, and not on others. This is similar to this comment on another discussion: Change code content via toggle #4757 (reply in thread)
2. Is it possible to have the tab selector as a toggle anywhere else on the site? Perhaps at the bottom of the NavBar? If the answer to this involves Javascript to read the browser's local storage, I can work with that.
3. What is the best way to have this selection work in a URL that affects all tabs?

For 3, here's the best example I can give:

• I have a page with two tables on it. Each has "Metric" and "Imperial" content tabs.
• If I click on either tab, all tabs on the page update, as expected.
• If I refresh the pags, all tabs switch to the last set choice, as expected.
• If I enter a URL that accesses a tab directly, it only affects the one tab, and not all of them
  • Adding #__tabbed_1_2 will set table 1 to tab 2 (Imperial)
  • Table 2 will still be on tab 1 (Metric)
• How can I make that URL affect all tabs?

I understand I'm probably not using this in the most traditional way (as meant for documentation), but it is the best way to get a whole lot of useful extensions into a nice, usable theme.

Thanks!

[anthonylavado]

I'm guessing, based on my review of things so far, the best way to accomplish this would be to hide the tab selectors with CSS. Then to have the switching take place from a nav toggle button, I'd have to add some Javascript that works with a component in the nav partial files.

[kamilkrzyskow]

Hi @anthonylavado,
sorry for the delay in responding, I've read the OP when it was posted, and postponed writing a response since this is a rather custom case which needed some thought, and then this discussion was overshadowed by other notifications 😞

1. Is it possible to only show the tab selector on the first collection, and hide it on subsequent displays?

There is the rather new but somewhat supported nth-child pseudo selector that supports inner selectors

• https://caniuse.com/css-nth-child-of

You could use it to hide tabs other than the first. If you want more browser support, then a combination of JavaScript that adds some special .hide-those-tabs class and CSS itself would be necessary.

2. Is it possible to have the tab selector as a toggle anywhere else on the site?

The tabs are rendered in HTML next to their respective sections, there is no option to change the "spawn" location for them.
So like you surmised you'd have to use JavaScript to inject some sort of button and style it separately with CSS.

For accessing the localStorage Material for MkDocs exposes the __md_get function:

• https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/javascripts/base.html
• https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/partials/javascripts/content.html

3. What is the best way to have this selection work in a URL that affects all tabs?

From your example, you want to synchronize other tabs to the selected based on the URL.
I guess this should be the standard behaviour of the linked tabs, so maybe consider creating an Issue bug report?

To be clear you don't want to change the users set preferences, just want the URL to temporarily override the visible tabs to match the one selected in the URL? So after removing #__tabbed_1_2 it would go back to using the preferences?

If this isn't a bug, you'd need to use some JavaScript after page load, and use the URL to find the selected tab and then synchronize the selection with other tabs.

If the answer to this involves Javascript to read the browser's local storage, I can work with that.

Given this comment that's all the information you need? Or do you want some more hints?

---

As a side note, imo if you are able to use JavaScript to control the data, perhaps don't use the tabs at all which require "duplicating" the content with slight alteration and instead dynamically transform the content inside the tables, as in, recalculate the data on the fly.