Scroll to anchor in content tab

[Crockeo]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

Hi!

I'm technically breaking rule (3) (no open or closed issues) in that this was recently discussed in a Q/A and in an issue.

I recently added some Javascript to my company's deployment of mkdocs-material to allow for anchors inside of content tabs^[1]. The response so far suggests that this isn't stable enough to be enabled by default, but I was wondering if it could be included as a default plugin (with documented caveats about degradation on slow connections).

Thanks for your time!

[1]:

(function () {
  function init() {
    const anchor = window.location.hash.slice(1);
    if (anchor === '') {
      return;
    }

    const element = document.getElementById(anchor);

    const tabbedSet = element.closest('.tabbed-set');
    const checkboxes = tabbedSet.getElementsByTagName('input');
    if (checkboxes.length === 0) {
      return;
    }

    const tabbedBlock = element.closest('.tabbed-block');
    const index = Array.from(tabbedBlock.parentNode.children).indexOf(tabbedBlock);

    // some extra cursed javascript to:
    // 1. activate the tab
    // 2. make the browser move to the anchor
    //    by making it think that the location has changed
    checkboxes[index].click();
    window.location = window.location;
  }

  window.addEventListener('DOMContentLoaded', init, false);
  window.addEventListener('hashchange', init, false);
})();

Use Cases

At my company we want to be able to link to content inside of content tabs to cross-reference docs which are parametrized by programming language (e.g. install guides for Go / Java / Python).

The existing discussion on the GH repo demonstrates interest:

• #3833
• #3527

Screenshots / Mockups

No response

[feasgal]

We would use the heck out of this.

[Martin Donath]

Thanks for suggesting. As you may have already noticed, anchors produced by headlines (when permalinks are enabled) in content tabs have several problems, which I discussed in #3527 (comment):

The general advice is not to put headers into content tabs [...] The usage of headers in tabs is discouraged.

• Anchor tracking does not work, since the position cannot be computed for hidden elements
• Table of contents may show duplicate items

For this reason it's not practical to add this behavior, as it would encourage the use of anchors inside tabs, which as noted above is discouraged for the unfixable side-effects that it imposes. However, thanks for providing the code, so users can add it to their documentation if they feel that they need this functionality 😊

[Martin Donath]

Additionally, as a side note, #3833 which you also referenced is something entirely different – it talks about triggering a content tab through an anchor link. This is theoretically possible but might break on slow connections (or when JavaScript is not available).

[Crockeo]

Good point on #3833, I had originally read that post as moving to an anchor inside of a content tab. I'll just make this a plugin for folks to use internally, then.

Thank you for the response and for considering this feature.