Merge pull request #367 from pmarsceill/pdmosses-collapsible-toc

Pdmosses collapsible toc
This commit is contained in:
Patrick Marsceill 2020-06-30 13:48:49 -04:00 committed by GitHub
commit 5277d14547
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 4 deletions

View File

@ -165,6 +165,10 @@
} }
} }
summary {
cursor: pointer;
}
h1, h1,
h2, h2,
h3, h3,

View File

@ -7,11 +7,14 @@ nav_order: 5
# Navigation Structure # Navigation Structure
{: .no_toc } {: .no_toc }
## Table of contents <details open markdown="block">
{: .no_toc .text-delta } <summary>
Table of contents
</summary>
{: .text-delta }
1. TOC 1. TOC
{:toc} {:toc}
</details>
--- ---
@ -231,4 +234,21 @@ To generate a Table of Contents on your docs pages, you can use the `{:toc}` met
{:toc} {: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).