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,
h2,
h3,

View File

@ -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).