Change all tabbed sections to the same tab?

[dataframing]

Hi there!

I'm using tabbed sections within a post and it's been going great so far. For the sake of this example, assume my post is about how to install some tool, and the tabs highlight specific instructions on Ubuntu, macOS, and Windows.

The post is pretty lengthy, and for reasons, I think I'd like to have many small tabbed sections instead of (say) three monolithic tabs. That's been great, but one idea I had to improve the user experience was to have all tabs "switch" to the selected tab.

For example, imagine we have 10 different "examples" that span the 3 tabs. The reader starts with the Ubuntu tab auto-selected, but wants to see the difference between Ubuntu and macOS, so for the first example they click on the macOS tab. I think it would benefit the user experience to have the remaining tabs also switch to the macOS tab. Hopefully that makes sense!

I'm not 100% convinced this is a good idea, so if it's not easy to implement within jupyter-book I'm happy to drop it. But if it is, I'd love to see what some beta readers think before releasing more broadly.

If it helps, here is my environment information:

Jupyter Book: 0.10.2
MyST-NB: 0.12.3
Sphinx Book Theme: 0.1.0
MyST-Parser: 0.13.7
Jupyter-Cache: 0.4.3
NbClient: 0.5.3

Thank you!! Many thanks to the authors for building such a fantastic tool.

[chrisjsewell]

Heya, yeh as I mentioned in jupyter-book/jupyter-book#1413, sphinx-design will eventually replace the current sphinx-panels, and this already has synced tabs: https://sphinx-design.readthedocs.io/en/latest/tabs.html#synchronised-tabs

[dataframing]

Ahh, so sorry I missed that! Thank you Chris. I'll be on the lookout for sync'd tabs. Is it available within a preview build yet? If not no worries.

[dataframing]

Got it working. For anyone wondering how to get synchronized tabs:

1. Add sphinx-design to your project's dependencies (currently at 0.0.5)

2. Add the following to your _config.yml:

   sphinx:
   
     [...skipping...]
   
     extra_extensions:
       - sphinx_design
   

3. Follow the synchronized tabs example on Chris' documentation above: https://sphinx-design.readthedocs.io/en/latest/tabs.html#synchronised-tabs.