Skip to content

tab-item option :name: should end up in the rendered HTML #68

@drammock

Description

@drammock

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

  1. I expected :name: to show up in the rendered HTML somewhere (ideally on the input node).
  2. I expected it to be easier to target the tabs with JS 🙂

bug

  1. whatever I specify for :name: is not in the rendered HTML
  2. targeting a desired tab with JS requires a circuitous process of:
    1. parse the label node's textContent to find the right tab
    2. read its for attribute
    3. use that to find the correct input node

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions