Context

For example if I have:

.. tab-set::
 .. tab-item:: YES!
 :name: yes
 Content shown when user click the "YES!" tab.
 .. tab-item:: NO!
 :name: no
 Content shown when user click the "NO!" tab.

Inputting https://org-name.github.io/docs-site/question.html#no opens the page to the location of the tab-set, but does not open the corresponding tab.

Proposal

I propose inputting https://org-name.github.io/docs-site/question.html#no opens the page to the location of the tab-set and opens the corresponding tab.

I understand this can be done with the :sync: & key fields using a URL query, but this particular page that I'm working on only has one set of dropdowns so it doesn't make much sense to add a sync parameter. Moreover, I think it's easier to construct URLs with a simple # instead of a query (here I'm thinking about my colleagues when they need to link someone to a page with tabs). I think the :name: field would more useful if not only linked to where the tab-set is, but also opened the corresponding tab.

This seems to require changes to the ready() function. For example, add

 if (window.location.hash) {
 const hash = window.location.hash.substring(1); // Remove '#'
 const tabButton = document.querySelector(`.sd-tab-label[id="${hash}"]`);
 if (tabButton) { tabButton.click(); }
 }

after line 34.

It would also be awesome to have a function to update the hash whenever a tab is clicked. For example, add

 label.addEventListener('click', function() {window.location.hash = this.getAttribute('id');})

after line 37 of sphinx_design.js

This code is untested, I'm not sure this works. But I think this is how it would be done

Tasks and updates

No response