-
Notifications
You must be signed in to change notification settings - Fork 65
Description
Describe the bug
context
I want to run a little JS function to detect user platform, and select/display the tab in a tab group that matches their platform. It's hard to target those tabs cleanly. I tried specifying a :name: for my different tab items, but the specified names don't appear anywhere in the resulting HTML (I think instead they're written as rST anchor names/targets?).
Here's a simplified tab-set output (I've replaced the long hash strings with HASH-NNNN to make it easier to see what matches what):
<div class="sd-tab-set docutils">
<input checked="checked" id="HASH-1111" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-1111">Linux</label>
<div class="sd-tab-content docutils">
<p>text for Linux users</p>
</div>
<input id="HASH-2222" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-2222">macOS</label>
<div class="sd-tab-content docutils">
<p>text for Mac users</p>
</div>
<input id="HASH-3333" name="HASH-0000" type="radio">
<label class="sd-tab-label" for="HASH-3333">Windows</label>
<div class="sd-tab-content docutils">
<p>text for Windows users</p>
</div>
</div>
related: #30 proposed to add HASH-1111, HASH-2222, and HASH-3333 to the respective .sd-tab-content-classed divs. That would be helpful; to my mind even more helpful would be to actually use the :name: value set in the rST code as the id attribute of the input tag and as the for attribute of the label tag. This would allow one to directly target know which input node to target in order to activate the desired tab.
expectation
- I expected
:name:to show up in the rendered HTML somewhere (ideally on theinputnode). - I expected it to be easier to target the tabs with JS 🙂
bug
- whatever I specify for
:name:is not in the rendered HTML - targeting a desired tab with JS requires a circuitous process of:
- parse the
labelnode'stextContentto find the right tab - read its
forattribute - use that to find the correct
inputnode
- parse the
problem
This is a problem for people who want their site to auto-select the tab based on the viewer's platform.
Reproduce the bug
.. tab-set::
.. tab-item:: Linux
:name: foo
some Linux content.
.. tab-item:: macOS
:name: bar
some macOS content.
.. tab-item:: Windows
:name: baz
some Windows content.
foo, bar, and baz will not show up in the rendered HTML
List your environment
not using jupyter-book. Sphinx-design is pulled in by pydata-sphinx-theme.
$ mamba list sphinx
jupyter_sphinx 0.3.2 py310hff52083_0 conda-forge
pydata-sphinx-theme 0.8.1 pypi_0 pypi
sphinx 4.5.0 pyh6c4a22f_0 conda-forge
sphinx-autobuild 2021.3.14 pyhd8ed1ab_0 conda-forge
sphinx-copybutton 0.5.0 pypi_0 pypi
sphinx-design 0.1.0 pyhd8ed1ab_0 conda-forge
sphinx-gallery 0.11.0.dev0 dev_0 <develop>
sphinx-sitemap 2.2.0 pyhd8ed1ab_0 conda-forge
sphinx-theme-builder 0.2.0a14 pyhd8ed1ab_0 conda-forge
sphinxcontrib-applehelp 1.0.2 py_0 conda-forge
sphinxcontrib-bibtex 2.4.2 pyhd8ed1ab_0 conda-forge
sphinxcontrib-devhelp 1.0.2 py_0 conda-forge
sphinxcontrib-htmlhelp 2.0.0 pyhd8ed1ab_0 conda-forge
sphinxcontrib-jsmath 1.0.1 py_0 conda-forge
sphinxcontrib-qthelp 1.0.3 py_0 conda-forge
sphinxcontrib-serializinghtml 1.1.5 pyhd8ed1ab_2 conda-forge
sphinxext-rediraffe 0.2.7 pyhd8ed1ab_0 conda-forge