Table of contentsc only shows h2 links when h1 is active
Only show the h2's that are children of the active h1
MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -63,3 +63,26 @@ h4 {
a {
color: inherit;
}
+
+.sr-only {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border-width: 0 !important;
+}
+
+.not-sr-only {
+ position: static !important;
+ width: auto !important;
+ height: auto !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ overflow: visible !important;
+ clip: auto !important;
+ white-space: normal !important;
+}

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
ol{
margin-left: $unit;
+ @extend .sr-only;
}
}
}
-
-
a:hover{
font-weight: bold;
}
list-style-type: none;
}
- .active {
- &.li{
- display: inline-block;
}
- color: $color-4;
- background-color: $gray-4;
+
+.table-of-contents a.active + ol{
+ @extend .not-sr-only;
+ margin-left: $unit !important;
+ @include transition-timing;
+ transition-property: all;
}
+.table-of-contents a + ol.not-sr-only {
+ @extend .not-sr-only;
+ margin-left: $unit !important;
}
\ No newline at end of file

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -14,6 +14,7 @@ function isMobile(){
}
const toc = {
+ currentH1Link: null,
getMobileNavbarHeight(){
if(isMobile()){
@@ -52,6 +53,24 @@ const toc = {
link.classList.add('active');
+ if(toc.currentH1Link){
+ if(toc.currentH1Link.parentElement.lastElementChild.tagName == 'OL'){
+ toc.currentH1Link.parentElement.lastElementChild.classList.remove('not-sr-only');
+ }
+ }
+
+ if(element.tagName === 'H2'){
+
+ toc.currentH1Link = link // link inside a level 2 OL
+ .parentElement // li
+ .parentElement // ol
+ .parentElement // Level one ol
+ .firstElementChild; // h1 link
+
+ link.parentElement.parentElement.classList.add('not-sr-only');
+
+ }
+
} else {
link.classList.remove('active');

Table of contentsc only shows h2 links when h1 is active

- Only show the h2's that are children of the active h1