Link to a specific tab

[rdauria]

Context

Ability to generate a link to a page containing tabs with a specific tab open (different than the one open by default, generally the first). This would be an awesome feature. I am sure it has been already asked but I am not sure I was able to find a direct answer. Thanks!

Proposal

Ability to generate a link to a page containing tabs with a specific tab open (different than the one open by default, generally the first).

Tasks and updates

No response

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[rdauria]

Just in case my request was a bit too vague, here is a link to a question on stackoverflow that addresses exactly what I am trying to do, that is, create a link that will open a page with a certain desired tab open:

https://stackoverflow.com/questions/10337814/how-can-i-link-directly-to-a-specific-javascript-tab

in particular it would be great if sphinx-tabs could generate a href for each tab, just like in the stackoverflow example:

    <ul class="tabs">
        <li><a href="#panel1">About Us</a></li>
        <li><a href="#panel2">Contact Us</a></li>
        <li><a href="#panel3">Mailing List</a></li>
        <li><a href="#panel4">Terms</a></li>
        <li><a href="#panel5">Privacy Policy</a></li>
        <li><a href="#panel6">Help</a></li>
    </ul>

however, despite the fact that in each tab definition I follow the directions to add Cross-referencing arbitrary locations, with for example:

.. _my-tab-no-1:
.. tab:: Tab no 1

an href to the particular tab is not created.

I guess an alternative would be to create a link that executes a javascript command (the one that changes the tab to the desired view). I have been trying to look under the hood at tabs.js but I am not too sure I have identified what would be the javascript command that changes the tab (something along the lines of: https://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript). Any ideas on how to do so?

Thanks for such a great sphinx extension!!!

[foster999]

Thanks for the feature request and suggestion for the implementation 😊

We've had similar requests in the past, about linking to load on a specific tab in a specific tab set (i.e. Open part way down a page and with the tab changed). However, just linking to open a specific tab on the the whole group would be much more feasible.

As you suggest, we could trigger a tab change on load based on something passed in the URL. This could either call the change tab method directly or could set the tab via the session object, which we use to open the last selected tab on a page change. I guess we might need some validation on the passed tab name too, or at least check what happens when the tab name doesn't exist.

Is this something you'd like to try to implement? Otherwise, I might be able to make a start some time next week

[PeterBetlem]

Out of curiosity, has there been any progress on this?

[foster999]

Not yet I'm afraid, but may take a look soon if there's still interest :)

I'm not clear if the need is to:

1. have a tab open on the page when it loads (e.g. load a tab "C++", instead of the default "Java"), so that it shows when you scroll down to it. I can see why this might be useful for group-tab
2. Or to open the page at a specific tab set with a specific tab open (like a typical anchor)? Which is useful for referencing content on a page

[PeterBetlem]

Both have their uses, sure, but wouldn't it be more straightforward to treat things as a regular anchor first and foremost? and, then as an extension, if the active/anchored tab is a grouped tab, all other linked tabs should switch to the active tab sort of as a default. That said, I am not familiar with the code, so not sure how easy that would be to implement.

[rdauria]

@foster999 yes there is interest :)

For the time being I have implemented the JS solution given here:

https://github.com/readthedocs/readthedocs.org/blob/main/docs/_static/js/expand_tabs.js

but this is far from ideal for the following reasons:

1. if you want to link to a tab from within the documentation you have to use the URL and cannot use the internal referencing tools of sphinx
2. once you have entered the address in the URL search box of your browser even if you click to other locations of your documentation the address does not refresh

What we would really need is for the tabs to have anchors, see for example:

https://www.tensorflow.org/install/pip#macos

this is much better than telling your users navigate to page such and such and click on the tab "macOS."

What would it take to implement something like this?

Thanks in advance :)