https://jen-cortes-infoplus.github.io/kb/toc-nav.js

1function createTopBtn() {
2    const btnTop = document.createElement("button");
3    btnTop.textContent = "Go to Top ^";
4    btnTop.id = "btn-top"
5
6    btnTop.addEventListener("click", function () {
7        window.scrollTo({
8            top: 0,
9            behavior: 'smooth'
10        });
11    });
12    return btnTop;
13}
14
15function createToggleBtn(elemId) {
16    const btnTocToggle = document.createElement('button');
17    btnTocToggle.id = "btn-toc-toggle";
18    btnTocToggle.textContent = 'toggle contents';
19
20    btnTocToggle.addEventListener("click", () => {
21        targetElement = document.getElementById(elemId);
22        if (targetElement.style.display === "none") {
23            targetElement.style.display = "block";
24        } else {
25            targetElement.style.display = "none";
26        }
27    });
28
29    return btnTocToggle;
30}
31
32function createTOC() {
33    const headings = document.querySelectorAll('h3, h4, h5, h6');
34    const tocList = document.createElement('ul');
35    var splitFound = false;
36
37    headings.forEach((heading) => {
38        const level = parseInt(heading.tagName.slice(1)) - 2; // because we are excluding h1 & h2's minus "2"
39        const listItem = document.createElement('li');
40        const anchor = document.createElement('a');
41
42        if (!heading.textContent.includes("Was this article helpful?") && !splitFound) {
43            // Add id to heading if it doesn't have one
44            if (!heading.id) {
45                heading.id = heading.textContent.toLowerCase().replace(/[^a-z0-9]/g, '-');
46            }
47
48            anchor.href = `#${heading.id}`;
49            anchor.textContent = heading.textContent;
50            anchor.classList.add("nav-text");
51            listItem.appendChild(anchor);
52
53            // Indentation based on heading level
54            listItem.style.paddingLeft = `${(level - 1) * 15}px`;
55
56            // Add to appropriate level in the list
57            let currentList = tocList;
58            for (let i = 1; i < level; i++) {
59                if (currentList.lastChild && currentList.lastChild.tagName === 'UL') {
60                    currentList = currentList.lastChild;
61                } else {
62                    const newList = document.createElement('ul');
63                    currentList.appendChild(newList);
64                    currentList = newList;
65                }
66            }
67
68            currentList.appendChild(listItem);
69        } else {
70            splitFound = true;
71        }
72    });
73
74    return tocList;
75}
76
77const content = document.getElementsByTagName("main")[0];
78const mainMenuContainer = document.createElement('div');
79mainMenuContainer.appendChild(createTOC());
80mainMenuContainer.id = "main-menu-container";
81mainMenuContainer.classList.add("main-menu-container");
82//mainMenuContainer.style.display = "none";
83
84const mainMenuNav = document.createElement('nav');
85mainMenuNav.id = 'main-menu'
86mainMenuNav.classList.add("main-menu");
87
88
89const tocIcon = document.createElement('i');
90tocIcon.classList.add("fas");
91tocIcon.classList.add("fas-toc");
92tocIcon.classList.add("icon");
93tocIcon.classList.add("fa-solid");
94tocIcon.classList.add("fa-book");
95tocIcon.classList.add("fa-2x");
96mainMenuNav.appendChild(tocIcon);
97
98
99const tocTitle = document.createElement("p");
100tocTitle.classList.add("toc-title");
101tocTitle.classList.add("flip-txt");
102tocTitle.innerText = "Table of Contents";
103mainMenuNav.appendChild(tocTitle);
104
105mainMenuNav.appendChild(mainMenuContainer);
106content.prepend(mainMenuNav);
107
108
109
110const element = document.querySelector('.main-menu');
111
112mainMenuNav.addEventListener('mouseover', function () {
113    mainMenuContainer.classList.add('hover-class');
114    tocTitle.classList.remove('flip-txt');
115});
116
117element.addEventListener('mouseout', function () {
118    mainMenuContainer.classList.remove('hover-class');
119    tocTitle.classList.add('flip-txt');
120});