diff --git a/_sass/content.scss b/_sass/content.scss index 5bf0ad514b9171379c26b20d27d2cc0f19407898..113e7334900440b7e454f630d38d271f1c7c7d08 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -165,6 +165,10 @@ } } + summary { + cursor: pointer; + } + h1, h2, h3, diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index e19112d9c6dcad117bff0425527728762278d738..7283c32dc643d8842f6d96e928471abf64a3250d 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -7,11 +7,14 @@ nav_order: 5 # Navigation Structure {: .no_toc } -## Table of contents -{: .no_toc .text-delta } - +<details open markdown="block"> + <summary> + Table of contents + </summary> + {: .text-delta } 1. TOC {:toc} +</details> --- @@ -231,4 +234,21 @@ To generate a Table of Contents on your docs pages, you can use the `{:toc}` met {:toc} ``` -This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. +This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself. To get an unordered list, replace `1. TOC` above by `- TOC`. + +### Collapsible Table of Contents + +The Table of Contents can be made collapsible using the `<details>` and `<summary>` elements , as in the following example. The attribute `open` (expands the Table of Contents by default) and the styling with `{: .text-delta }` are optional. + +```markdown +<details open markdown="block"> + <summary> + Table of contents + </summary> + {: .text-delta } +1. TOC +{:toc} +</details> +``` + +The result is shown at [the top of this page](#navigation-structure) (`{:toc}` can be used only once on each page).