A small sphinx extension to add “toggle button” elements to sections of your page. For example:

Collapse admonitions#

You can collapse admonitions (notes, warnings, etc) so that their content is hidden until users click the admonition title.

An example admonition toggle

:::{admonition} Click the title to toggle
:class: dropdown

This title was made into a dropdown admonition by adding `:class: dropdown` to it.

See Collapse admonitions with the dropdown class for more information.

Hide any content behind a toggle button#

You can also hide arbitrary content behind a toggle button. When users press the button, they will see the content. For example:

An example toggle directive

This is a toggled content block!

This is a toggled content block!

You can either do this with a {toggle} directive, or by adding a toggle CSS class to any elements you’d like hidden behind a toggle button.

See Collapse a block of content with a CSS selector for more details.

Check out sphinx-design as well!

For a bootstrap-based “dropdown” directive that uses pure CSS, check out Sphinx Design


You can install sphinx-togglebutton with pip:

pip install sphinx-togglebutton

Then, activate it in your sphinx build by adding it to your conf.py configuration file, like so:


extensions = [

See Use and configure for information about how to use sphinx-togglebutton.