diff --git a/_sass/content.scss b/_sass/content.scss
index 7ab23d836b1faead5785348089c046d00d05c2a1..764392e9172313ff75d38f2c2c37e81af118b459 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 0e09660e87227d827941be0be262a604593d1fdd..7283c32dc643d8842f6d96e928471abf64a3250d 100644
--- a/docs/navigation-structure.md
+++ b/docs/navigation-structure.md
@@ -236,7 +236,9 @@ To generate a Table of Contents on your docs pages, you can use the `{:toc}` met
 
 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`.
 
-The table of contents can be made collapsible by adding HTML markup, as in the following example. The attribute `open` and the styling with `{: .text-delta }` are optional.
+### 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">