Toggle groups of elements

docs/conf.py

@@ -38,7 +38,7 @@
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
-extensions = ["myst_parser", "sphinx_design", "sphinx_togglebutton"]
+extensions = ["myst_nb", "sphinx_copybutton", "sphinx_design", "sphinx_togglebutton"]
 
 # Add any paths that contain templates here, relative to this directory.
 templates_path = ["_templates"]
@@ -89,6 +89,14 @@
 myst_enable_extensions = ["colon_fence"]
 
 # To test behavior in JS
+togglebutton_groups = {
+    "cell-inputs": ".cell.tag_hide-input .cell_input",
+"cell-outputs": ".cell.tag_hide-output .cell_output",
+"directive": ".toggle",
+"admonitions": ".admonition.dropdown",
+"group1": ".group-one",
+"group2": ".group-two",
+}
 # togglebutton_hint = "test show"
 # togglebutton_hint_hide = "test hide"
 # togglebutton_open_on_print = False
@@ -97,6 +105,8 @@
 # relative to this directory. They are copied after the builtin static files,
 # so a file named "default.css" will overwrite the builtin "default.css".
 # html_static_path = ["_static"]
+html_logo = "_static/logo-chevron.svg"
+html_title = "Sphinx Togglebutton"
 
 # Custom sidebar templates, must be a dictionary that maps document names
 # to template names.
@@ -176,3 +186,23 @@
         "Miscellaneous",
     )
 ]
+
+# -- Create an example directive for the docs ---------------------------------
+from docutils.parsers.rst.directives.admonitions import Admonition
+
+
+class Example(Admonition):
+    def run(self):
+        # Manually add a "tip" class to style it
+        if "class" not in self.options:
+            self.options["class"] = ["tip"]
+        else:
+            self.options["class"].append("tip")
+        # Add `Example` to the title so we don't have to type it
+        self.arguments[0] = f"Example: {self.arguments[0]}"
+        # Now run the Admonition logic so it behaves the same way
+        nodes = super().run()
+        return nodes
+
+def setup(app):
+    app.add_directive("example", Example)

docs/index.md

@@ -21,7 +21,7 @@ Some content
 ````
 :::
 
-See {ref}`dropdown-admonitions` for more information.
+See {ref}`use:admonition-toggles` for more information.
 
 ## Hide any content behind a toggle button
 
@@ -81,5 +81,6 @@ See {ref}`usage` for information about how to use `sphinx-togglebutton`.
 :maxdepth: 2
 use
 reference/index
+reference/notebooks
 changelog
 ```

docs/reference/index.md

@@ -3,6 +3,18 @@
 This page shows the most common ways that `sphinx-togglebutton` is used as a reference.
 This is a benchmark for styling, and also helps demonstrate the behavior of this extension.
 
+## Toggle all button
+
+Here's a button that will toggle all items of a particular type
+
+```{toggle-all-button}
+```
+
+With a custom title:
+
+```{toggle-all-button} A test!
+```
+
 ## Use amongst text
 
 Here's a paragraph, it's just here to provide some text context for the togglebuttons in this section.

docs/reference/notebooks.md

@@ -0,0 +1,69 @@
+---
+jupytext:
+  cell_metadata_filter: -all
+  formats: md:myst
+  text_representation:
+    extension: .md
+    format_name: myst
+    format_version: 0.13
+    jupytext_version: 1.11.5
+kernelspec:
+  display_name: Python 3 (ipykernel)
+  language: python
+  name: python3
+---
+
+# MyST Notebooks
+
+`sphinx-togglebutton` is particularly useful with `MyST-NB` notebooks.
+This is used to show and hide code cell inputs and outputs.
+
+Here is a demonstration of the functionality.
+
+## `{toggle-all-button}` usage
+
+The code below generated the buttons that follow:
+
+````
+```{toggle-all-button}
+```
+
+```{toggle-all-button} cell-inputs
+```
+
+```{toggle-all-button} cell-outputs
+```
+````
+
+```{toggle-all-button}
+```
+
+```{toggle-all-button} cell-inputs
+```
+
+```{toggle-all-button} cell-outputs
+```
+
+## Cell inputs
+
+```{code-cell}
+:tags: [hide-input]
+for ii in range(20):
+  print(f"Number: {ii}")
+```
+
+## Cell outputs
+
+```{code-cell}
+:tags: [hide-output]
+for ii in range(20):
+  print(f"Number: {ii}")
+```
+
+## Hide the whole cell
+
+```{code-cell}
+:tags: [hide-cell]
+for ii in range(20):
+  print(f"Number: {ii}")
+```