Dropdown Group

About

This is an extension to sphinx-design dropdowns, intending to implement a similar behavior like using CSS toggle-group to group exclusive toggles.

If you have multiple dropdown elements, you can group them together, in order to make only one toggle from the group active at a time, effectively defining exclusive dropdowns.

This is similar to how HTML radio buttons behave, where two buttons cannot be checked at the same time.

Usage

In order define a group of multiple dropdown elements that should exclusively open when toggled, wrap them into a container element using the dropdown-group class.

MARKDOWN

::::{div} dropdown-group

:::{dropdown} Dropdown A
Dropdown content A
:::

:::{dropdown} Dropdown B
Dropdown content B
:::

::::

RST

.. div:: dropdown-group

    .. dropdown:: Dropdown A

        Dropdown content A

    .. dropdown:: Dropdown B

        Dropdown content B

Example

Dropdown A

Dropdown content A

Dropdown B

Dropdown content B